ファイルをJavaScript変数に文字列としてアップロード

Question

HTML形式のファイル（例：.txtまたは.csv形式）を、JavaScriptのみを使用してJavaScript変数にJavaScript変数にアップロードする方法はありますか？もしそうなら、あなたは簡単な例を提供できますか？私はPHPを使用したくない。

ありがとうございます！ここで

Answer 1

は「myfileの」という名前のファイルの入力が含まれている「あるmyForm」という名前のフォームに基づいて迅速かつ汚い例です。

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をレイアウトすることでアップロードの順序が保持されます。