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

/p>

<

多选文件，同时展现预览

/**

* 多选文件，同时展现预览

*/

(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”:

break;

case “text”:

html += “

” + reader.result + “

”;

break;

}

output.innerHTML = html;

if (len > 1) {//大于1说明，当选中多个文件时，执行回调函数callback

//这里给callback传入len是为了用于判断当执行次数等于len时(说明已经读取了所有选中的文件了)，终止执行，因为文件数是从0算起的。

callback(len);

}

})

})();