20

現在、一連のファイルの最初の 3 文字を読み取るために、次のようなパターンを使用しています。

var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
  var fr = new FileReader();
  fr.onload = function(e) { 
    var first_three_chars = e.target.result.substr(0,3);
  }
  fr.readAsText(f);
}

問題は、ファイルの最初の 3 文字だけに関心があるのに対し、この方法ではファイル全体を読み取るため、大量のメモリと時間を浪費することです。最初の文字をすばやく確認するだけで、ファイルをすばやく反復処理するにはどうすればよいですか?

編集：スライス（）が答えでした、ありがとうsshen。これが私がそれをした方法です：

var files = e.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
  var fr = new FileReader();
   fr.onloadend = function(e) {
    if (e.target.readyState == FileReader.DONE) {
      var first_three_chars = e.target.result;
    }
  };
  var blob = f.slice(0, 3);
  fr.readAsText(blob);
}
4

3 に答える 3

-1

いずれにしても、FileList インターフェイスの内容であるファイルのリストを確認する必要があります。ファイル全体を読み込んでいる理由は、すべてのファイルに onload をアタッチして readAsText() を呼び出すときです。ファイル全体を読みたくない場合は、ファイル リストの前にコールバックされるイベント ハンドラを登録するだけです。ファイルがロードされ、それを通過します。thisのようなもので、最初にそれぞれを読み取らずに、フォーム送信またはイベント オブジェクトの一部としてファイル リストを取得することを期待するものにアタッチします。

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      var fileName = f.name.substr(0,3);
      output.push('<strong>', fileName, '</strong>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
于 2013-02-12T21:45:50.310 に答える