上传多个文件
<!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>
上传多个文件
Posted 情绪控攻城狮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了上传多个文件相关的知识，希望对你有一定的参考价值。
以上是关于上传多个文件的主要内容，如果未能解决你的问题，请参考以下文章
大文件上传下载实现思路，分片断点续传代码实现，以及webUpload组件