將文件作爲字符串上傳到JavaScript變量

Question

客戶端是否有任何方式將JavaScript表單（例如.txt或.csv格式）的文件作爲字符串上傳到JavaScript變量中？如果是這樣，你能提供一個簡單的例子嗎？我不想使用任何PHP。

在此先感謝！

Answer 1

這是基於一個名爲「myForm的」表單上的快速和骯髒的例子，它包含一個名爲「MYFILE」文件輸入：

document.forms['myform'].elements['myfile'].onchange = function(evt) { 
    if(!window.FileReader) return; // Browser is not compatible 

    var reader = new FileReader(); 

    reader.onload = function(evt) { 
     if(evt.target.readyState != 2) return; 
     if(evt.target.error) { 
      alert('Error while reading file'); 
      return; 
     } 

     filecontent = evt.target.result; 

     document.forms['myform'].elements['text'].value = evt.target.result; 
    }; 

    reader.readAsText(evt.target.files[0]); 
}; 

下面是相關的HTML表單：

<form id="myform"> 
    <p> 
    <input id="myfile" name="files[]" multiple="" type="file" /> 
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea> 
    </p> 
</form> 

和一個jsfiddle來演示它。

Answer 2

上yent's answer這種變化管理多個上傳和使用jQuery的：

HTML：

<form id="myform"> 
    <p> 
    <input id="myfile" name="files[]" multiple="" type="file" /> 
    <textarea id="text" rows="20" cols="40">nothing loaded</textarea> 
    </p> 
</form> 

腳本：

$("#myfile").on("change", function (changeEvent) { 
    for (var i = 0; i < changeEvent.target.files.length; ++i) { 
    (function (file) {    // Wrap current file in a closure. 
     var loader = new FileReader(); 
     loader.onload = function (loadEvent) { 
     if (loadEvent.target.readyState != 2) 
      return; 
     if (loadEvent.target.error) { 
      alert("Error while reading file " + file.name + ": " + loadEvent.target.error); 
      return; 
     } 
     console.log(loadEvent.target.result.length); // Your text is in loadEvent.target.result 
     }; 
     loader.readAsText(file); 
    })(changeEvent.target.files[i]); 
    } 
}); 

值得注意：

• 你必須使用一個FILEREAD呃每個（併發）文件讀取。否則，您會看到一個例外，如The object is already busy reading。
• loadEvent回調將以任意順序調用，可能取決於上傳的大小。
• loadEvent關閉會看到循環結束的i值。
• FileReader結果不是數組;他們沒有forEach。

此jsfiddle演示通過在更改處理程序中放置div來保留上傳順序。