Javascript-具有限制的多文件上传器

如何解决Javascript-具有限制的多文件上传器

此Javascript函数允许上传多个文件，并包含文件大小限制，但是缺少允许上传的最大文件数。

function handleFile(e)传递了文件类型和大小参数，但不知道在何处限制允许上传的文件数量。

const fInputs = document.querySelectorAll('.btcd-f-input>div>input')

function getFileSize(size) {
    let _size = size
    let unt = ['Bytes','KB','MB','GB'],i = 0; while (_size > 900) { _size /= 1024; i++; }
    return (Math.round(_size * 100) / 100) + ' ' + unt[i];
}

function delItem(el) {
    fileList = { files: [] }
    let fInp = el.parentNode.parentNode.parentNode.querySelector('input[type="file"]')
    for (let i = 0; i < fInp.files.length; i++) {
        fileList.files.push(fInp.files[i])
    }
    fileList.files.splice(el.getAttribute('data-index'),1)

    fInp.files = createFileList(...fileList.files)
    if (fInp.files.length > 0) {
        el.parentNode.parentNode.parentNode.querySelector('.btcd-f-title').innerHTML = `${fInp.files.length} File Selected`
    } else {
        el.parentNode.parentNode.parentNode.querySelector('.btcd-f-title').innerHTML = 'No File Chosen'
    }
    el.parentNode.remove()
}

function fade(element) {
    let op = 1;  // initial opacity
    let timer = setInterval(function () {
        if (op <= 0.1) {
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    },50);
}

function unfade(element) {
    let op = 0.01;  // initial opacity
    element.style.opacity = op;
    element.style.display = 'flex';
    let timer = setInterval(function () {
        if (op >= 1) {
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
    },13);
}

function get_browser() {
    let ua = navigator.userAgent,tem,M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if (/trident/i.test(M[1])) {
        tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
        return { name: 'IE',version: (tem[1] || '') };
    }
    if (M[1] === 'Chrome') {
        tem = ua.match(/\bOPR|Edge\/(\d+)/)
        if (tem != null) { return { name: 'Opera',version: tem[1] }; }
    }
    M = M[2] ? [M[1],M[2]] : [navigator.appName,navigator.appVersion,'-?'];
    if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1,1,tem[1]); }
    return {
        name: M[0],version: M[1]
    };
}

for (let inp of fInputs) {
    inp.parentNode.querySelector('.btcd-inpBtn>img').src = ''
    inp.addEventListener('mousedown',function (e) { setPrevData(e) })
    inp.addEventListener('change',function (e) { handleFile(e) })
}

let fileList = { files: [] }
let fName = null
let mxSiz = null

function setPrevData(e) {
    if (e.target.hasAttribute('multiple') && fName !== e.target.name) {
        console.log('multiple')
        fName = e.target.name
        fileList = fileList = { files: [] }
        if (e.target.files.length > 0) {
            for (let i = 0; i < e.target.files.length; i += 1) {
                console.log(e.target.files[i])
                fileList.files.push(e.target.files[i])
            }
        }
    }
}

function handleFile(e) {
    let err = []
    const fLen = e.target.files.length;
    mxSiz = e.target.parentNode.querySelector('.f-max')
    mxSiz = mxSiz != null && (Number(mxSiz.innerHTML.replace(/\D/g,'')) * Math.pow(1024,2))

    if (e.target.hasAttribute('multiple')) {
        for (let i = 0; i < fLen; i += 1) {
            fileList.files.push(e.target.files[i])
        }
    } else {
        fileList.files.push(e.target.files[0])
    }

    //type validate
    if (e.target.hasAttribute('accept')) {
        let tmpf = []
        let type = new RegExp(e.target.getAttribute('accept').split(",").join("$|") + '$','gi')
        for (let i = 0; i < fileList.files.length; i += 1) {
            if (fileList.files[i].name.match(type)) {
                tmpf.push(fileList.files[i])
            } else {
                err.push('Wrong File Type Selected')
            }
        }
        fileList.files = tmpf
    }

    // size validate
    if (mxSiz > 0) {
        let tmpf = []
        for (let i = 0; i < fileList.files.length; i += 1) {
            if (fileList.files[i].size < mxSiz) {
                tmpf.push(fileList.files[i])
                mxSiz -= fileList.files[i].size
            } else {
                console.log('rejected',i,fileList.files[i].size)
                err.push('Max Upload Size Exceeded')
            }
        }
        fileList.files = tmpf
    }

    if (e.target.hasAttribute('multiple')) {
        e.target.files = createFileList(...fileList.files)
    } else {
        e.target.files = createFileList(fileList.files[fileList.files.length - 1])
        fileList = { files: [] }
    }

    // set File list view
    if (e.target.files.length > 0) {
        e.target.parentNode.querySelector('.btcd-f-title').innerHTML = e.target.files.length + ' File Selected'
        e.target.parentNode.parentNode.querySelector('.btcd-files').innerHTML = ''
        for (let i = 0; i < e.target.files.length; i += 1) {
            let img = null
            if (e.target.files[i].type.match(/image-*/)) {
                img = window.URL.createObjectURL(e.target.files[i])
            }
            else {
                img = ''
            }
            e.target.parentNode.parentNode.querySelector('.btcd-files').insertAdjacentHTML('beforeend',`<div>
                    <img src="${img}" alt="img"  title="${e.target.files[i].name}">
                    <div>
                        <span title="${e.target.files[i].name}">${e.target.files[i].name}</span>
                        <br/>
                        <small>${getFileSize(e.target.files[i].size)}</small>
                    </div>
                    <button type="button" onclick="delItem(this)" data-index="${i}" title="Remove This File"><span>&times;</span></button>
                </div>`)

        }
    }

    // set eror
    if (err.length > 0) {
        for (let i = 0; i < err.length; i += 1) {
            e.target.parentNode.parentNode.querySelector('.btcd-files').insertAdjacentHTML('afterbegin',`
            <div style="background: #fff2f2;color: darkred;display:none" class="btcd-f-err">
                <img src="" alt="img">
                <span>${err[i]}</span>
            </div>`)
        }
        const errNods = e.target.parentNode.parentNode.querySelectorAll('.btcd-files>.btcd-f-err')
        for (let i = 0; i < errNods.length; i += 1) {
            unfade(errNods[i])
            setTimeout(() => { fade(errNods[i]) },3000);
            setTimeout(() => { errNods[i].remove() },4000);
        }
        err = []
    }

}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Arial,Helvetica,sans-serif;
}

.btcd-f-input {
  display: inline-block;
  width: 340px;
  position: relative;
  overflow: hidden;
}

.btcd-f-input>div>input::-webkit-file-upload-button {
  cursor: pointer;
}

.btcd-f-wrp {
  cursor: pointer;
}

.btcd-f-wrp>small {
  color: gray;
}

.btcd-f-wrp>button {
  cursor: pointer;
  background: #f3f3f3;
  padding: 5px;
  display: inline-block;
  border-radius: 9px;
  border: none;
  margin-right: 8px;
  height: 35px;
}

.btcd-f-wrp>button>img {
  width: 24px;
}

.btcd-f-wrp>button>span,.btcd-f-wrp>span,.btcd-f-wrp>small {
  vertical-align: super;
}

.btcd-f-input>.btcd-f-wrp>input {
  z-index: 100;
  width: 100%;
  position: absolute;
  opacity: 0;
  left: 0;
  height: 37px;
  cursor: pointer;
}

.btcd-f-wrp:hover {
  background: #fafafa;
  border-radius: 10px;
}

.btcd-files>div {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border-radius: 10px;
  margin-left: 30px;
  width: 91%;
  margin-top: 10px;
  height: 40px;
}

.btcd-files>div>div {
  display: inline-block;
  width: 73%;
}

.btcd-files>div>div>small {
  color: gray;
}

.btcd-files>div>img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 10px;
}

.btcd-files>div>div>span {
  display: inline-block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: Nowrap;
}

.btcd-files>div>button {
  background: #e8e8e8;
  border: none;
  border-radius: 50px;
  width: 25px;
  height: 25px;
  font-size: 20px;
  margin-right: 6px;
  padding: 0;
}

.btcd-files>div>button:hover {
  background: #bbbbbb;
}

<div class="btcd-f-input">
  <small>Multiple Upload</small>
  <div class="btcd-f-wrp">
    <button class="btcd-inpBtn" type="button"> <img src="" alt=""> <span> Attach File</span></button>
    <span class="btcd-f-title">No File Chosen</span>
    <small class="f-max">(Max 1 MB)</small>
    <input multiple type="file" name="snd_multiple" id="">
  </div>
  <div class="btcd-files">

  </div>
</div>

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://unpkg.com/create-file-list@1.0.1/dist/create-file-list.min.js"></script>

解决方法

在类型validate之前的handleFile函数中：

let maxFileNum = 10; // Maximum number of files
if (fileList.files.length > maxFileNum){
    err.push("Too many files selected");
}