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 个字符感兴趣，而这种方法会读取整个文件，浪费大量内存和时间。如何快速遍历文件，只需快速查看第一个字符？

编辑： 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);
}
4

3 回答 3

21

您可以使用该.slice方法。你可以在这里阅读更多

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);
于 2013-02-12T22:08:01.897 回答
1

没有足够的代表发表评论，因此在此处对@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，则必须从头开始阅读。

于 2019-01-18T10:04:22.737 回答
-1

无论哪种方式，您仍然必须通过文件列表，FileList 接口的内容。您读取整个文件的原因是当您将 onload 附加到每个文件并调用 readAsText() 如果您不想读取整个文件，只需注册一个事件处理程序，该处理程序在文件被加载并通过它。像这样的东西，您附加到表单提交或期望将文件列表作为其事件对象的一部分的东西，而无需先阅读每个文件。

<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 回答