FileReader

摘要

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象来指定要读取的文件或数据。File 对象可以从用户使用 input 元素选择文件返回的 FileList 对象、从拖放操作的 DataTransfer 对象或从 HTMLCanvasElement 上的 mozGetAsFile() API 获取。

属性

没有属性。

方法

abort: abort 方法用于中止读取操作。返回后，dom/Element/readyState 将为 DONE。
readAsArrayBuffer: 返回表示当前加载字节数（相对于总数）的部分 Blob 数据，作为一个 ArrayBuffer 对象，一个固定长度的二进制数据缓冲区。
readAsDataURL: 将 blob 的完整数据作为 Data URL 返回，本质上是文件数据的 Base64 编码字符串。
readAsText: 返回表示当前加载字节数（相对于总数）的部分 Blob 数据，并根据编码确定将其解码到内存中。

事件

没有事件。

示例

上传前预览图像

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = 'image/jpg';

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

查看实时示例

备注

当调用 FileReader 构造函数时，将返回一个新的 FileReader 对象。此 FileReader 对象通过在读取发生时触发进度事件到附加到 FileReader 对象的事件处理程序方法，从而实现对单个 File 对象的异步读取。

FileReader

摘要

属性

方法

事件

示例

备注

相关规范

参见

其他文章

署名