上传多个文件-CSDN博客

上传多个文件



<!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>