console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
    <body>
    <style>

    </style>
        <div class="ellipsis">
            <input id="inputFile" class="inputFile" multiple onchange="choseFile(event)" type="file" style="display: none;">
            <button onclick="submit()">点击选择文件</button>
            <button onclick="submitForm()">点击提交</button>
            <ul id="fileList" onclick="listClick(event)" style="list-style: none; padding-left: 0;"></ul>
        </div>   
    </body>
</html>
<script>
    var upDataList = []
    // input函数触发
    function submit() {
        document.getElementById('inputFile').click()
    }
    // 文件选择
    function choseFile(e) {
        if (e.target.files && e.target.files.length) {
            upDataList.push(...document.getElementById('inputFile').files)
            console.log(upDataList, document.getElementById('inputFile').files, e.target.files)
            if (upDataList && upDataList.length > 0) {
                renderFn()
            }
        }
    }
    // 文件对象提交
    function submitForm() {
        // 后端不支持批量接受，只能分开循环传输文件
        upDataList.map((item) => {
            let formDOM = document.createElement('form')
            formDOM.id = 'formDOM'
            formDOM.enctype = 'multipart/form-data'
            formDOM.method = "post"
            let formData = new FormData(formDOM)
            formData.set("name", item.name)
            formData.set("file", item)
            kxhrSend(formData)
        })
    }
    // 小黄人循环调用
    function kxhrSend(data) {
        kxhr({
            url: 'https://www.baidu.com',
            type: 'POST',
            async: true,
            data: data,
            success: function (data) {
                console.log(data)
            }
        })
    }
    // 渲染函数
    function renderFn() {
        let refs = document.getElementById('fileList')
        refs.innerHTML = ''
        upDataList.map((item, index) => {
            let itemNode = document.createElement('li')
            itemNode.inx = index
            itemNode.innerText = item.name
            refs.appendChild(itemNode)
        })
    }
    // 小黄人封装
    function kxhr(options) {
        let xhr = new XMLHttpRequest()
        if (options.type === 'GET') {
            xhr.open(options.type, options.url, options.async)
            xhr.send(null)
        } else if (options.type === 'POST') {
            xhr.open(options.type, options.url, options.async)
            xhr.send(options.data)
        }
        xhr.onreadystatechange = function () {
            console.log(xhr.readyState, xhr, xhr)
            if (xhr.readyState === 4 && xhr.status === 200) {
                options.success(xhr.responseText)
            }
        }
    }
    // 列表点击事件
    function listClick(e) {
        if (upDataList[e.target.inx].type === 'image/png') {
            maskFn(upDataList[e.target.inx])
        } else {
            alert('暂时不支持除图片外预览')
        }
    }
    // 弹窗遮罩层fn
    function maskFn(data) {
        let bodyDiv = document.querySelector('body')
        let maskDiv = document.createElement('div')
        maskDiv.style.height = window.innerHeight + 'px'
        maskDiv.style.width = window.innerWidth + 'px'
        maskDiv.style.zIndex = 100
        maskDiv.style.position = 'fixed'
        maskDiv.style.top = 0
        maskDiv.style.left = 0
        maskDiv.style.background = '#000'
        maskDiv.style.opacity = 0.5
        maskDiv.style.display = 'flex'
        maskDiv.style.justifyContent = 'space-around'
        maskDiv.id = 'mask'
        maskDiv.onclick = function () {
            document.querySelector('body').removeChild(document.querySelector('#mask'))
        }
        let maskBox = document.createElement('div')
        maskBox.style.height = '500px'
        maskBox.style.width = '600px'
        maskBox.style.background = 'white'
        maskBox.style.marginTop = '15vh'
        maskBox.style.display = 'flex'
        maskBox.style.justifyContent = 'space-around'
        let maskIMG = document.createElement('img')
        maskIMG.style.marginTop = '200px'
        maskIMG.style.width = '200px'
        maskIMG.style.height = '200px'
        let IMGreader = new FileReader()
        IMGreader.readAsDataURL(data)
        IMGreader.onload = function (events) {
            maskIMG.src = events.target.result
            maskBox.appendChild(maskIMG)
            maskDiv.appendChild(maskBox)
            bodyDiv.appendChild(maskDiv)
        }
    }
</script>