js FileReader

FileReader是前端进行文件处理的一个重要的API，特别是在对图片的处理上。它提供了一些方法和事件，具体支持的方法和事件可以在w3c官网上查看。FileReader常见的应用是在实现上传图片的功能上，通过FileReader可以读取本地文件，并将文件内容转化为可用的数据格式，以便进行后续的操作。

下面是一个示例，展示了如何使用FileReader实现上传图片的功能：

<input id="file" type="file" onchange="fileChange" />
进度：<span id="progress"></span>
<div id="box"></div>

function fileChange(e) {
  var file = e.target.files[0];
  var reader = new FileReader();

  reader.onprogress = function(e) {
    var progress = document.getElementById("progress");
    if (e.lengthComputable) {
      var percentLoaded = Math.round((e.loaded / e.total) * 100);
      progress.innerHTML = percentLoaded + "%";
    }
  };

  reader.onload = function(e) {
    var box = document.getElementById("box");
    var img = document.createElement("img");
    img.src = e.target.result;
    box.appendChild(img);
  };

  reader.readAsDataURL(file);
}

在这个示例中，通过input标签选择文件后，触发fileChange函数。fileChange函数中创建了一个FileReader实例，然后通过onprogress事件监听文件读取的进度，并将进度显示在页面上。而onload事件则在文件读取完成后，将读取到的文件内容转化为Data URL，然后创建一个img元素，并将Data URL赋值给img的src属性，最后将img添加到页面上的box元素中。