前端开发者前端开发包含哪些技术|前端开发项目源码|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 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>多选文件，同时展现预览</title>
</head>
<body>
<input type=”file” multiple id=”fileBox”>
<div id=”output”></div>
<script>
/**
* 多选文件，同时展现预览
*/
(function () {
var fileNode = document.getElementById(‘fileBox’),
output = document.getElementById(‘output’),
type = ‘default’,
html = ”,
callback = null,
events = null,
reader = new FileReader();
/**
* 暴露了两个接口，events和callback
* 当多选文件时，用于判断是否执行回调callback。
* 暴露events是为了获取length值，知道到底选中了多少个文件
* 暴露callback是为了，判断为多个文件时可以执行
*
* @param event
*/
function handleEvent(event) {
var files = event.target.files,
i = 0;
events = event;
callback = (function (i) {
return function (len) {
console.log(i);
//执行的次数等于总的读取文件次数，则返回
if (i == len) { return; }
if (/image/.test(files[i].type)) {
reader.readAsDataURL(files[i]);
type = “image”;
} else {
reader.readAsText(files[i], “UTF-8”);
type = “text”;
}
i++;
}
})(i);
callback();
}
//监听“change”事件
fileNode.addEventListener(‘change’, handleEvent, false);
//监听读取文件事件“error”，“progress”，“load”
reader.addEventListener(‘error’, function () {
console.log(“error”);
output.innerHTML = “Could not read file, error code is” + reader.error.code;
});
reader.addEventListener(‘progress’, function (event) {
console.log(“progress”);
if (event.lengthComputable) {
output.innerHTML = event.loaded + “/” + event.total;
}
});
reader.addEventListener(‘load’, function () {
console.log(“load”);
var len = events.target.files.length;
switch (type) {
case “image”:
html += “<img src=\”” + reader.result + “\”>”;
break;
case “text”:
html += “<p>” + reader.result + “</p>”;
break;
}
output.innerHTML = html;
if (len > 1) {//大于1说明，当选中多个文件时，执行回调函数callback
//这里给callback传入len是为了用于判断当执行次数等于len时（说明已经读取了所有选中的文件了），终止执行，因为文件数是从0算起的。
callback(len);
}
})
})();
</script>
</body>
</html>
前端开发的开源工具包有哪些|前端开发课程有哪些|前端开发 项目经理职位jd
» 本文来自：前端开发者 » 《前端开发 多个文件同时在页面中预览》
» 本文链接地址：https://www.rokub.com/4971.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册