<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’,
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;
}
if (len > 1) {//大于1说明，当选中多个文件时，执行回调函数callback
//这里给callback传入len是为了用于判断当执行次数等于len时（说明已经读取了所有选中的文件了），终止执行，因为文件数是从0算起的。
callback(len);
}
})
})();
</script>
</body>
近期评论