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

Question

クライアントがHTML形式（.txtや.csv形式など）のファイルを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の回答のこのバリエーションは、複数のアップロードを管理し、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]);
  }
});

注目に値する：

• 読み取られる（同時）ファイルごとに1つのFileReaderを使用する必要があります。それ以外の場合は、のような例外が表示されますThe object is already busy reading。
• loadEventコールバックは、アップロードのサイズに応じて、任意の順序で呼び出されます。
• loadEventクロージャはi、ループを終了した値を確認します。
• FileReaderの結果は配列ではありません。forEachはありません。

このjsfiddleデモは、変更ハンドラーにdivを配置することにより、アップロードの順序を維持します。