Question

目前我使用如下图案来读取一系列文件的前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个字符感兴趣，而这个方法读取整个文件，浪费了大量的内存和时间。如何快速迭代文件，只需快速查看第一个字符？

编辑：slice（）就是答案，谢谢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);
}

Answer 1

您可以使用.slice方法。您可以阅读更多here

var reader = new FileReader();

reader.onloadend = function(evt) 
{
    if (evt.target.readyState == FileReader.DONE)  // DONE == 2
    {
        alert(evt.target.result);
    }
};

var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);

Answer 2

没有足够的代表发表评论，因此在此处发出有关@Stu Blair解决方案的警告：使用Blob.slice方法，您从Blob中获取了字节，而不是字符。

例如，这将不起作用：

const blob = new Blob([''], {type: 'text/plain'});
const fr = new FileReader();
fr.readAsText(blob); // Fine, fr.result will be ''
fr.readAsText(blob.slice(0, 2)); // Not good, fr.result will be '��'

您将必须使用FileReader.readAsArrayBuffer来获取字节。如果您的编码类似于utf-8，则必须从头开始阅读。

Answer 3

无论哪种方式，您仍然需要浏览文件列表，即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>

html5 fileReader - 如何只读取文件的前N个字符？

3 个答案: