javascript - FileAPIを介したファイルのアップロード

Question

複数のファイルを1つの関数に読み込む必要がありますA.FileAPIを使用する必要があります。ただし、FileReaderは非同期ダウンロードを実行します。関数Aの最後で、終了せずにすべてのファイルの内容を取得できますか？

Answer 1

完全に明確にするために、FileReader何もダウンロードしていません。ファイルの内容（ディスクに表示される内容）を非同期でメモリに読み込みます。

必要なことを行うには、読み取ったファイルを追跡し、すべて完了したらコールバックを呼び出します。

document.querySelector('[type="file"]').change = function(e) {
  handleFiles(toArray(e.target.files), function(results) {
    // results is an Array containing the FileReader results.
    alert('Done!');
  });

function toArray(list) {
  return Array.prototype.slice.call(list || [], 0);
}

function handleFiles(files, callback) {
  var results = [];

  files.forEach(function(file, i) {
    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = function(e) {
      results.push(e.target.result);
      if (results.length == files.length) {
        callback(results);
      }
    };
    reader.readAsDataURL(file);
  });
}

試してみてください：http：//jsbin.com/epatel/3/edit#html、live