多文件上传

index

         <section id="wrap">
            <h1>图片拖拽上传示范</h1>
            <section class="area">
                <article id="upload" draggable="true">
                    <span></span>
                    <div class="file">选择图片<form id="form" runat="server" method="post" enctype="multipart/form-data" ><input type="file"  multiple="multiple" id="imges1" name="imges1" class="upimages"/></form></div>
                </article>
                <article id="drag">请将图片拖到此区域</article>
            </section>
            <section class="info">
                <p>已选中<span class="num" id='picLen'>0</span>张图片，共<span class="size" id='picSize'>0</span>MB</p>
                <article>
                    <div class="file">继续选择<input type="file" id="imges2" name="imges1" class="upimages"/></div>
                    <div class="upload" id='btn'>开始上传</div>
                </article>
            </section>
            <section class="list">
                <ul id="oUl">
                </ul>
            </section>
        </section>
        

        <script src="js/js.js" type="text/javascript" charset="utf-8"></script>

js

let aInput = document.querySelectorAll('input');
let drag = document.querySelector('#drag');
let oUl = document.querySelector('#oUl');
let $ = obj=>document.querySelector(obj);

// 文件数组
let arr = [],
// 文件大小
    aSize = [],
// 文件名称
    aTitle = [];

// input选择文件
aInput.forEach(function (item,index) {
    item.onchange = function () {
        if( this.value ){
            if( this.files.length ){
                for( let i=0,len=this.files.length;i<len;i++ ){
                    let files = this.files.item(i);
                    arr.push(files);
                    aSize.push(files.size);
                    aTitle.push(files.name);

                    readerFile(files);
                }
            }
            this.value = '';
        }
    }
})

// 接收拖拽文件
drag.ondragenter = function () {
    this.innerText = '请释放鼠标';
}
drag.ondragover = function (e) {
    e.preventDefault();
    e.stopPropagation();
}
drag.ondragleave = function () {
    this.innerText = '请将图片拖拽到此区域';
}
drag.ondrop = function (e) {
    e.preventDefault();
    e.stopPropagation();
    for( let i=0,len=e.dataTransfer.files.length;i<len;i++){
        let files = e.dataTransfer.files.item(i);
        console.log(files)
        if(/image/.test(files.type)){
            arr.push(files);
            aSize.push(files.size);
            aTitle.push(files.name);
            readerFile(files);
        }
    }
}

// 图片预览
function readerFile(files) {
    // 不推荐用文件读取对象 FileReader 读取 data base64二进制数据 的字符串
    let blob = new Blob([files]);
    let url = window.URL.createObjectURL(blob);
    let li = document.createElement('li');
    li.innerHTML = '<img src="'+url+'" width="100%" height="100%" /><p></p>';
    $('#oUl').appendChild(li);

    count();
}


// 计算 图片个数 大小名称
function count() {
    let aLi = $('#oUl').querySelectorAll('li');

    // 图片的个数
    $('#picLen').innerText = arr.length;
    // 图片的总大小

    if(!aSize[0]){
        $('#picSize').innerText = 0;
    }else{
        $('#picSize').innerText = (eval(aSize.join('+'))/1024/1024).toFixed(2);
    }
    let aP = $('#oUl').querySelectorAll('p');
    aP.forEach((item,index)=>{
        item.innerHTML = aTitle[index] + '<i></i>';
    })
    del();
}

// 删除 文件数组 li
function del() {
    let aLi = $('#oUl').querySelectorAll('li');
    aLi.forEach((item,index)=>{
        item.children[1].children[0].addEventListener('click',function (e) {
            arr.splice(index,1);
            aSize.splice(index,1);
            $('#oUl').removeChild(aLi[index]);
            count();
        })
    })
}


// 点击上传
$('.upload').addEventListener('click',function (e) {
    let aLi = $('#oUl').querySelectorAll('li');
    console.log( arr )
    if(arr.length){
        arr.forEach((item,index)=>{
            (function (index) {
                let xhr = new XMLHttpRequest();
                xhr.onload = function () {
                    $('#drag').innerText = '图片已上传成功';
                    $('#oUl').removeChild(aLi[index]);
                    arr.splice(index,1);
                }
                xhr.open('post','./upload.php',true);
                let data = new FormData();
                data.append('file',item)
                xhr.send(data);
            })(index);
        })
    }
})