读取文件

• 认识 FileReader 接口

• 判断浏览器是否支持 FileReader

判断浏览器是否支持 FileReader ，如果浏览器支持 FileReader 接口，那么该浏览器有一个位于 Windows 对象下的 FileReader 构造函数，如果这个构造函数存在，那么就可以通过 new 实例化一个 FileReader 来使用。

• FileReader 接口的方法

方法名称	说明
abort()	中断读取当前操作。需要传入参数 none
readAsBinaryString()	使用二进制格式读取文件。需要传入参数 file
readAsDataURL()	使用 URL 格式读取文件。需要传入参数 file
readAsText	使用文本格式读取文件。需要传入参数 file,[encoding]

• FileReader 接口的事件

事件	额
onabort	当读取数据中断时触发
onerror	当读取数据出错时触发
onloadstart	当读取数据开始时触发
onload	当读取数据成功时触发
onloadend	当读取操作完成时触发。无论成功或者失败
onprogress	正在读取数据时触发

• 读取二进制文件

readAsBinaryString() 方法的使用很简单，只要将一个要读取的文件 file 作为参数传入即可，这样读取的结果将保存到 result 属性中。

• 显示预览图像

调用 FileReader 接口的 readAsDataURL() 方法，不通过后台而即时实现图片预览的功能。

使用 FileReader 对象

读取并显示文件

FileReader 对象包括 5 个方法，其中 4 个是读取文件，另一个用来中断读取操作：

• readAsText(Blob,type) ： 将 Blob 对象或文件中的数据以文本读取。默认 type 为 UTF-8
• readAsBinaryString(Blob) ： 将 Blob 对象或文件的数据读取为二进制字符串。通常调用该方法将文件提交到服务器，服务器可以通过这段文字储存文件
• readAsDataURL(Blob) ： 将 Blob 对象或文件中的数据读取为 DataURL 字符串。该方法就是将数据以一种特殊的格式的 URL 地址形式读入
• readAsArrayBuffer(Blob) ： 将 Blob 的对象或文件中的数据读取为一个 ArrayBuffer 对象
• abort() ：不包含参数，中断读取操作

上述四个方法都包含一个 BLob 对象或 file 对象参数，无论是读取成功与否或失败，都不返回读取结果，读取结果被包含于 result 属性中。

window.onload = function () {
  var result = document.getElementById('result');
  var file = document.getElementById('file');
  if (typeof FileReader == 'undefined') {
    result.innerHTML = '<h1>当前浏览器不支持 FileReader 对象</h1>';
    file.setAttribute('disabled', 'disabled');
  }
};
// 将文件以 Data URL 形式进行读入页面
function readAsDataURL() {
  // 检查是否为图像文件
  var file = document.getElementById('file').files[0];
  if (!/image\/\w+/.test(file.type)) {
    alert('提交文件不是图像类型');
    return false;
  }
  var reader = new FileReader(); // 将文件以 Data URL 形式进行读入页面
  reader.readAsDataURL(file);
  reader.onload = function (e) {
    result.innerHTML = '<img src="' + this.result + '" alt=""/>';
  };
} // 将文件以二进制形式进行读入页面
function readAsBinaryString() {
  var file = document.getElementById('file').files[0];
  var reader = new FileReader();
  // 将文件以二进制形式进行读入页面
  reader.readAsBinaryString(file);
  reader.onload = function (f) {
    result.innerHTML = this.result;
  };
}

// 将文件以文本形式进行读入页面
function readAsText() {
  var file = document.getElementById('file').files[0];
  var reader = new FileReader();
  // 将文件以文本形式进行读入页面
  reader.readAsText(file);
  reader.onload = function (f) {
    result.innerHTML = this.result;
  };
}

上面的示例，也可以不读取而直接发给服务器。

fileReader 对象读取的数据都保存在 result 中。

监控读取操作

FileReader 对象提供 6 个事件，用于监控文件读取状态，简单说明如下：

• onabort ：数据读取中断时触发
• onprogress ：数据读取中触发
• onerror ：数据读取出错时触发
• onload ：数据读取成功时触发
• onloadstart ：数据开始读取时触发
• onloadend ：数据读取完成（无论成功与否）时触发

window.onload = function () {
  var result = document.getElementById('result');
  var file = document.getElementById('file');
  if (typeof FileReader == 'undefined') {
    result.innerHTML = '<h1>当前浏览器不支持 FileReader 对象</h1>';
    file.setAttribute('disabled', 'disabled');
  }
};
function readFile() {
  var file = document.getElementById('file').files[0];
  var reader = new FileReader();
  reader.onload = function (e) {
    result.innerHTML = '<img src="' + this.result + '" alt=""/>';
    console.log('load');
  };
  reader.onprogress = function (e) {
    console.log('progress');
  };
  reader.onabort = function (e) {
    console.log('abort');
  };
  reader.onerror = function (e) {
    console.log('error');
  };
  reader.onloadstart = function (e) {
    console.log('loadstart');
  };
  reader.onloadend = function (e) {
    console.log('loadend');
  };
  reader.readAsDataURL(file);
}