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

Posted 2023-02-15

【中文标题】html5 fileReader -- 如何只读取文件的前 N ​​个字符？

【英文标题】：html5 fileReader -- how to only read the first N characters of a file?

【发布时间】：2013-01-28 07:54:59

【问题描述】：

目前我使用如下模式来读取一系列文件的前 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);

【参考方案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>

【讨论】：

我应该更清楚——我正在寻找实际文件内容的前三个字符，而不是文件名。

【参考方案2】：

您可以使用.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);

【讨论】：

我认为这里的代码缺乏细节（你从哪里得到 file var ？）但提供的链接是完美的。 +1

var file = document.getElementById('myFile').files[0];

很好的解决方案，但是如果您使用 readAsDataURL 函数进行此操作，则生成的 url 将始终采用 'application/octet-stream' 格式。

【参考方案3】：

没有足够的代表发表评论，所以在这里提出一些关于@Stu Blair 解决方案的警告： 使用 Blob.slice 方法，您从 Blob 中获取 bytes，而不是 characters。

例如，这是行不通的：

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，则必须从头开始阅读。