2014-01-14 20 views
7

我有這段代碼和一個文件被轉換成base64我必須點擊選擇文件,然後選擇它。我想對文件名進行硬編碼,以便在頁面加載時將其轉換爲base64。Javascript讀取的文件沒有使用輸入

的JavaScript:

var handleFileSelect = function(evt) { 
    var files = evt.target.files; 
    var file = files[0]; 

    if (files && file) { 
    var reader = new FileReader(); 

    reader.onload = function(readerEvt) { 
     var binaryString = readerEvt.target.result; 
     document.getElementById("base64textarea").value = btoa(binaryString); 
    }; 

    reader.readAsBinaryString(file); 
    } 

    if (window.File && window.FileReader 
     && window.FileList && window.Blob) { 
    document.getElementById('filePicker') 
     .addEventListener('change', handleFileSelect, false); 
    } else { 
    alert('The File APIs are not fully supported in this browser.'); 
    } 
}; 

HTML:

<div> 
    <div> 
    <label for="filePicker">Choose or drag a file:</label><br/> 
    <input type="file" id="filePicker"> 
    </div> 
    </br> 
    <div> 
    <h1>Base64 encoded version</h1> 
    <textarea id="base64textarea" 
     placeholder="Base64 will appear here" 
     cols="50" rows="15"> 
    </textarea> 
    </div> 
</div> 

編輯:謝謝您的回答,他們是真正的幫助。

+2

我有一種感覺,瀏覽器是不會允許你任意從用戶的文件系統加載的文件。有些事件只能**直接用戶輸入生成。 –

+0

看起來你甚至無法爲javascript設置''元素的值。請參閱[注意:文件輸入](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input)。 –

回答

1

可以啓動鉻,Chrome瀏覽器與--allow-file-access-from-files標誌設置,使用的XMLHttpRequest()fetch()從本地文件系統請求文件。

fetch("file:///path/to/file") 
.then(response => response.arrayBuffer()) 
.then(ab => { 
    // do stuff with `ArrayBuffer` representation of file 
}) 
.catch(err => console.log(err)); 

參見Read local XML with JS