上传多个文件
<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>批量上传文件</title>
</head>
<body>
<input type="file" multiple value="上传文件" id="file">
<div class="box">
</div>
</body>
<script>
???let selectFile = document.getElementById(‘file‘);
???let preview = document.getElementsByClassName(‘box‘)[0];
function setSelectFileBehavior(subjects) {
???if(!Array.isArray(subjects)){
???????if(subjects.length) subjects = Array.from(subjects);
???????else subjects = [subjects]
???}
???subjects.forEach(subject => {
???????subject.addEventListener(‘change‘,evt =>{
??????????let fileInput = ?evt.target;
??????????let files = Array.from(fileInput.files);
??????????let URL = window.URL || window.webkitURL;
??????????if(typeof FileReader === ‘function‘){
??????????????files.forEach(file => {
??????????????????let reader = new FileReader();
??????????????????reader.readAsDataURL(file);
??????????????????reader.onload = function (evt) {
??????????????????????let event = new CustomEvent(‘fileselect‘,{
??????????????????????????detail:{
??????????????????????????????dataURL:evt.target.result
??????????????????????????}
??????????????????????});
??????????????????????subject.dispatchEvent(event);
??????????????????}
??????????????})
??????????} else if(URL){
?????????????files.forEach(file => {
???????????????????let blob = URL.createObjectURL(file);
???????????????????let event = new CustomEvent(‘fileselect‘,{
???????????????????????detail:{
???????????????????????????blob:blob
???????????????????????}
???????????????????});
?????????????????subject.dispatchEvent(event);
?????????????});
??????????}
???????})
???})
}
setSelectFileBehavior(selectFile);
selectFile.addEventListener(‘change‘,evt => {
???preview.innerHTML = ‘‘;
});
selectFile.addEventListener(‘fileselect‘,evt => {
???let img = new Image();
???img.src = evt.detail.dataURL || evt.detail.blob;
???img.style.padding = ‘5px‘;
???img.style.height = ‘150px‘;
???preview.appendChild(img);
})
</script>
</html>
上传多个文件
原文地址：http://www.cnblogs.com/QxkWeb/p/8028753.html