完整读取

var fileInput = document.getElementById('file');
fileInput.addEventListener('change', function(event) {
  var info = "",
    output = document.getElementById('output'),
    progress = document.getElementById('progress'),
    files = event.target.files,
    type = 'default',
    reader = new FileReader();
  if (/image/.test(files[0].type)) {
    reader.readAsDataURL(files[0]);
    type = 'image';
  } else {
    reader.readAsText(files[0]);
    type = 'text';
  }
  reader.onerror = function() {
    output.innerHTML = "Could not read file, error code is " +
      reader.error.code;
  };
  reader.onprogress = function(event) {
    if (event.lengthComputable) {
      progress.innerHTML = event.loaded + "/" + event.total;
    }
  };
  reader.onload = function() {
    var html = "";
    switch(type) {
      case 'image':
        html = `<img src="${reader.result}">`;
        break;
      case 'text':
        html = reader.result;
        break;
    }
    output.innerHTML = html;
  }
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <input id="file" type="file" name="" value="" multiple>
  <button type="submit"></button>
  <div id="output">
    
  </div>
  <div id="progress"></div>
  <script src="app.js"></script>
</body>
</html>

部分读取

部分读取只需要调用input.files[0].slice(begin, end)截取一部分内容即可，范围是[begin,end), 如:

reader.readAsDataURL(files[0].slice(begin, end))

为什么可以这样写呢？

下面是读取方法的函数签名:

void abort();
void readAsArrayBuffer(in Blob blob);
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob blob);
void readAsText(in Blob blob, [optional] in DOMString encoding);

这些方法都接受一个Blob类型的对象，实际上File是Blob的子类，File的slice方法就是Blob类上的slice方法，返回值也是Blob类型对象

只读取文件的一部分可以节省时间，非常适合只关注数据中某个特定部分（如文件头部）的情况。