上传多个文件
<!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>