【文件上传、秒传、分片上传、断点续传、重传】

原创

已于 2025-02-06 23:41:38 修改 · 989 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2025-02-05 21:31:08 首次发布

文章目录

获取文件对象
文件上传（秒传、分片上传、断点续传、重传）
优化

获取文件对象

input标签的onchange方法接收到的参数就是用户上传的所有文件

<html lang="en">
    <head>
        <title>文件上传</title>
        <style>
            #inputFile,#inputDirectory {
     
     
                display: none;
            }
            #dragarea{
     
     
                width: 100%;
                height: 100px;
                border: 2px dashed #ccc;
            }
            .dragenter{
     
     
                background-color: #ccc;
            }
        </style>
    </head>
    <body>
        <!-- 
            1. 如何上传多文件：multiple
            2. 如何上传文件夹：为了兼顾各浏览器兼容性，需设置三个属性：webkitdirectory mozdirectory odirectory
            3. 如何实现拖拽上传：input默认是有拖拽性质的，但是由于浏览器兼容性问题，开发一般不使用，一般使用div阻止默认事件以及通过拖拽api实现
            4. 如何获取选择的所有文件
         -->
         <div id="dragarea"></div>
         <input id="inputFile" type="file" multiple>
         <!-- 如果不想用input自带的上传文件的样式，可以通过button的click触发input的点击事件来上传文件 -->
         <button id="buttonFile">上传文件</button>
         <input id="inputDirectory" type="file" multiple webkitdirectory mozdirectory odirectory>
         <button id="buttonDirectory">上传文件夹</button>
         <ul class="fileList"></ul>
         <script>
            const inputFile = document.getElementById("inputFile")
            const buttonFile = document.getElementById("buttonFile")
            const inputDirectory = document.getElementById("inputDirectory")
            const buttonDirectory = document.getElementById("buttonDirectory")
            const dragarea = document.getElementById("dragarea")
            const fileList = document.getElementById("fileList")
            const appendFile = (fileList) => {
     
     
                for(const file in fileList){
     
     
                    const li = document.getElementById("li")
                    li.innerText = `${ 
       file.name}-${ 
       file.name.split(".")[1]}-${ 
       file.size}`
                    fileList.appendChild(li)
                }
            }
            const traverseFile = (entry) => {
     
     
                if(entry.isFile){
     
     
                    entry.file((file) => {
     
     
                        const li = document.getElementById("li")
                        li.innerText = `${ 
       file.name}-${ 
       file.name.split(".")[1]}-${ 
       file.size}`
                        fileList.appendChild(li)
                    })
                }else if(entry.isDirectory){
     
     
                    traverseDirectory(entry)
                }
            }
            const traverseDirectory = (directory) => {
     
     
                const reader = directory.createReader()// 创建读取器读取文件夹
                reader.readEntries((entries) => {
     
     
                    for(const entry of entries) {
     
     
                        traverseFile(entry)
                    }
                })
            }
            buttonFile.onclick = () => {
     
     
                inputFile.click

最低0.47元/天解锁文章