前端开发包含哪些技术|前端开发项目源码|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
评论前必须登录!
注册