前端开发 多个文件同时在页面中预览

前端开发包含哪些技术|前端开发项目源码|web前端项目开发实战源码

选中多个文件同时在页面中预览测试用例

主要用到的是FileReader类型，以及读取文件的两个方法，和一个属性，和三个事件即如下：

var reader = new FileReader();

//方法一（用于读取图片文件，并将文件以数据URI的形式保存在reader.result属性中）：
reader.readAsDataURL(file)；
//方法二 （以存文本的形式读取文件，并将读取到的文本存储到reader.result属性中）：
reader.readAsText(file,encoding)//第二个参数用于指定编码类型，是可选的。
//属性一：
reader.result//读取到的文件数据都会存储到这个属性中
//事件一（是否发生了错误）：
reader.onerror=function(){
//……
}
//事件二(是否读取了新数据)：
reader.onprogress = function(event){
//event里边含有三个属性，event.lengthComputable、event.loaded(读取到的数据字节)、event.total（文件的总字节数）
//……
}
//事件三（是否已经读完了整个文件）：
reader.onload = function(){
//…….
}

测试用例代码如下：

html 代码

前端开发的开源工具包有哪些|前端开发课程有哪些|前端开发 项目经理职位jd