H5图片上传方法 - somnus18/bak_info GitHub Wiki

#HTML5读取本地文件　FileReader API接口

1、FileReader接口的方法

FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

FileReader接口的方法

方法名 参数 描述

readAsBinaryString file 将文件读取为二进制编码

readAsText file,[encoding] 将文件读取为文本

readAsDataURL file 将文件读取为DataURL

abort (none) 终端读取操作

2、FileReader接口事件

FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。

FileReader接口的事件

事件 描述

onabort 中断

onerror 出错

onloadstart 开始

onprogress 正在读取

onload 成功读取

onloadend 读取完成，无论成功失败

3.js实现案例

function uploadImg(file) {

var reader = new FileReader(); 

//将文件以Data URL形式读入页面 

 reader.readAsDataURL(file.files[0]); 

// 加载成功

 reader.onload=function(e){ 

    var imgData = e.target.result;  // 图片的base64信息

 } 

}