「H5-API」FileReader

构造函数

FileReader()

获取文件对象

var fileInput = document.getElementById("fileInput");
fileInput.addEventListener('change', function(event) {
    var file = fileInput.files[0];
    // 或file = fileInput.files.item(0);
    console.log(file);
}, false);

使用FileReader读取文件

// 实例化
var reader = new FileReader();

// 监听读取完毕事件
reader.addEventListener("load", function () {
   // 根据读取形式返回结果
   console.log(reader.result);
  }, false);

reader.readAsDataURL(file);
// 读取base64 参数为 blob文件对象
// `readAsDataURL` 方法会读取指定的 Blob 对象表示一个不可变、原始数据的类文件对象。
// Blob 表示的不一定是JavaScript原生格式的数据。
// File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// 读取操作完成的时候,readyState 会变成已完成`DONE`,并触发 loadend 事件
// 同时 result 属性将包含一个`data:`URL格式的字符串(base64编码)以表示所读取文件的内容。

// 其他方法
// 读取出 ArrayBuffer 数据对象
readAsArrayBuffer()
// 读取字符串 默认以utf-8读取
readAsText()
Posted in JS