前端文件上传功能实战——前端实现（上）

最新推荐文章于 2024-12-25 22:57:14 发布
原创 最新推荐文章于 2024-12-25 22:57:14 发布 · 859 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript

目录


如果没有看过分析篇的铁铁可以先去看看分析篇： 功能分析篇

基础代码

html部分代码很简单：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="main">
        <input type="file" name="file" id="file" multiple>
        <label for="file" class="file-label" draggable="true">请将多个文件拖拽到此处进行扫描</label>
        <div class="buttons">
            <div class="left">
                <button class="file-choose">选择文件</button>
                <button class="folder-choose">选择文件夹</button>
            </div>
            <div class="right">
                <button class="list-stop">暂停全部任务</button>
                <button class="list-start">开始全部任务</button>
                <button class="list-delete">删除全部任务</button>
            </div>
        </div>
        <div class="file-list">
            <div class="list-title list-column">
                <div class="list-row">文件名</div>
                <div class="list-row">上传进度</div>
                <div class="list-row">状态</div>
                <div class="list-row">操作</div>
            </div>
            <div class="list-body">
            </div>
        </div>
    </div>
    <script src="./untils/spark-md5.js"></script>
    <script src="./js/main.js" type="module"></script>
</body>

</html>

css部分受限于篇幅故不展示

文件展示模板

const fileItem = document.createElement('div');
fileItem.classList.add('list-column');
fileItem.innerHTML = `
        <div class="list-row list-name">${filename}</div>
        <div class="list-row">
            <div class="progress" style="--percent: ${percent};">
                <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                </div>
                <div class="progress-number">
                    <span class="progress-percent">${percent}</span>
                    <span class="progress-speed">${speed}</span>
                </div>
            </div>
        </div>
        <div class="list-row">
            <div class="row-status">${this.status}</div>
        </div>
        <div class="list-row">
            <div class="row-operate">
                <div class="row-stop iconfont icon-zanting"></div>
                <div class="row-start iconfont icon-kaishi"></div>
                <div class="row-delete iconfont icon-shanchu"></div>
            </div>
        </div>
`;

整体效果

整体效果如下

效果

DOM

DOM类用于获取页面相关元素并提供对应的事件绑定

核心方法

它的核心方法如下：

  1. addFile
    接受一个BigFile类型的参数file
    将文件的DOM元素添加到文件列表中显示
  2. onFileChange
    接受一个函数类型的参数cb
    添加事件监听器，监听文件按钮的点击事件和拖放事件
    将处理好的file数组传入cb中
  3. onFolderChange
    接受一个函数类型的参数cb
    添加事件监听器，监听文件夹按钮的变化事件
    将处理好的file数组传入cb中

相关实现

class DOM {
    constructor() {
        this.files = []
        this.fileButton = document.querySelector('.file-choose');
        this.folderButton = document.querySelector('.folder-choose');
        this.fileDragger = document.querySelector('.file-label');
        this.fileList = document.querySelector('.list-body');
        this.fileListStopButton = document.querySelector('.list-stop');
        this.fileListStartButton = document.querySelector('.list-start');
        this.fileListClearButton = document.querySelector('.list-delete');
    }
    addFile(file) {
        this.files.push(file);
        this.fileList.appendChild(file.fileDOM.getDOM());
    }
    removeFile(file) {
        this.files = this.files.filter(f => f !== file);
    }
    onFileChange(cb) {
        this.fileButton.addEventListener('click', async (e) => {
            const files = []
            try {
                const handleFiles = await showOpenFilePicker({
                    multiple: true
                })
                for (const item of handleFiles) {
                    const file = await handleFile(item)
                    files.push(file)
                }
            } catch (err) {
                console.log(err);
                return;
            }
            cb(files);
        });
        this.fileDragger.addEventListener('dragover', (e) => {
            e.preventDefault();
        });
        this.fileDragger.addEventListener('dragenter', (e) => {
            e.preventDefault()
        });
        this.fileDragger.addEventListener('drop', async (e) => {
            e.preventDefault()
            const files = Array.from(e.dataTransfer.files)
            cb(files)
        });
    }
    onFolderChange(cb) {
        this.folderButton.addEventListener('change', cb);
    }
}

从句柄到文件对象

无论是通过showOpenFilePicker还是通过showDirectoryPicker来获取文件，本质上获取的是文件的句柄对象，句柄对象无法直接使用，我们可以通过getFile方法来得到句柄对象对应的file对象

async function handleFile(item) {
    const file = await item.getFile();
    return file;
}

如果此时的句柄对象指向的是文件夹的话，我们就需要通过entries方法得到此文件的所有子文件，通过kind属性来判断此时的句柄对象是否指向文件

    async processHandle(handle) {
        if (handle.kind === "file") {
            return;
        }
        const entries = await handle.entries();
        handle.children = [];
        for await (const entry of entries) {
            const subHandle = entry[1];
            handle.children.push(subHandle);
        }
    }

当然，如果文件夹里的子文件数量十分的多的话我们不断调用processHandle方法会造成页面阻塞，我们可以通过利用浏览器空余时间处理，利用多线程技术，当用户需要时在处理当前层数的子文件
具体关于浏览器文件系统相关API的内容可以看我这篇文章
未动笔，未来可寄

FileDOM

BigFileDOM类主要控制每个文件在页面的相关展示，功能绑定等

核心方法

它的核心方法如下：

  1. onStopEvent
    为暂停按钮添加点击事件监听器
  2. onStartEvent
    为开始按钮添加点击事件监听器
  3. onDeleteEvent
    为删除按钮添加点击事件监听器，同时会将该文件对应的DOM元素移除
  4. getDOM
    返回创建的DOM元素
  5. updateStatus
    更新文件的状态
  6. updatePercent
    更新文件的进度百分比
  7. updateSpeed
    更新文件的传输速度
  8. createDOM
    创建与文件相关的DOM结构

相关实现

class FileDOM {
    constructor(filename) {
        this.filename = filename;
        this.status = "读取中";
        this.percent = "0%";
        this.speed = "0KB/s";
        this.dom = this.createDOM();
        this.stopButton = this.dom.querySelector('.row-stop');
        this.startButton = this.dom.querySelector('.row-start');
        this.deleteButton = this.dom.querySelector('.row-delete');
        this.statusElement = this.dom.querySelector('.row-status');
        this.percentElement = this.dom.querySelector('.progress-percent');
        this.speedElement = this.dom.querySelector(".progress-speed");
        this.processElement = this.dom.querySelector('.progress');
    }
    onStopEvent(cb) {
        this.stopButton.addEventListener('click', cb);
    }
    onStartEvent(cb) {
        this.startButton.addEventListener('click', cb);
    }
    onDeleteEvent(cb) {
        this.deleteButton.addEventListener('click', (e) => {
            this.dom.remove();
            cb && cb();
        });
    }
    getDOM() {
        return this.dom;
    }
    updateStatus(status) {
        this.status = status;
        this.statusElement.innerText = this.status;
    }
    updatePercent(percent) {
        this.percent = percent;
        this.percentElement.innerText = this.percent;
        this.processElement.style = `--percent:${this.percent};`;
    }
    updateSpeed(speed) {
        this.speed = speed;
        this.speedElement.innerText = this.speed;
    }
    createDOM() {
        const fileItem = document.createElement('div');
        fileItem.classList.add('list-column');
        fileItem.innerHTML = `
        <div class="list-row list-name">${this.filename}</div>
        <div class="list-row">
            <div class="progress" style="--percent: ${this.percent};">
                <div class="progress-bar">
                    <div class="progress-bar-inner"></div>
                </div>
                <div class="progress-number">
                    <span class="progress-percent">${this.percent}</span>
                    <span class="progress-speed">${this.speed}</span>
                </div>
            </div>
        </div>
        <div class="list-row">
            <div class="row-status">${this.status}</div>
        </div>
        <div class="list-row">
            <div class="row-operate">
                <div class="row-stop iconfont icon-zanting"></div>
                <div class="row-start iconfont icon-kaishi"></div>
                <div class="row-delete iconfont icon-shanchu"></div>
            </div>
        </div>
`;
        return fileItem;
    }
}
前端canvas项目实战——在线图文编辑器：序
石沉溪洞
05-21 1392
这个专栏，我将带领大家从入门HTML5中的Canvas，到最终实现一个精美的在线图文编辑器。我的初心没有变，就像几年以前，我在自己苦苦摸索实现之后，写下一篇篇博文，想要让初学者们在学习Java Web的道路上少走一些弯路一样。
node实战——koa实现文件上传
热门推荐
编程知识分享，主打前端
11-20 2万+
大家好，我是yma16，本文分享关于node实战——node实战——koa实现文件上传。本文适用对象：前端初学者转node方向，在校大学生，即将毕业的同学，计算机爱好者。node系列往期文章node_windows环境变量配置node_npm发布包linux_配置nodenode_nvm安装配置node笔记_http服务搭建（渲染html、json）node笔记_读文件node笔记_写文件node笔记_连接mysql实现crudnode笔记_formidable实现前后端联调的文件上传。
FormData实现文件上传（前端 后端）部分代码
12-13
FormData实现文件上传（前端 后端）部分代码 FormData实现文件上传（前端 后端) 工具类代码
js纯前端实现腾讯cos文件上传功能的示例代码
11-26
前言 在前端开发中文件上传是经常会遇到的，并且多数情况会使用第三方平台来存储文件，腾讯云cos是我们常用的。本篇文章就是带我从前端的角度实现腾讯云COS存储。本文参考了腾讯云COS开发文档 JavaScript SDK 步骤 安装腾讯云COS上传所需的sdk 下载cos-js-sdk-v5.min.js并引入index.html 监听文件上传组件 //监听文件变化 document.getElementById('file').onchange = function() { let file = this.files[0]; let type =
图片和文件上传的前端实现
07-03
图片和文件上传的前端实现，包含：html、js、css文件等。
web前端，jsp上传文件
b0303的博客
04-23 884
JSP 可以与 HTML form 标签一起使用，来允许用户上传文件到服务器。上传的文件可以是文本文件或图像文件或任何文档。 本章节我们使用 Servlet 来处理文件上传，使用到的文件有： upload.jsp : 文件上传表单。 message.jsp : 上传成功后跳转页面。 UploadServlet.java : 上传处理 Servlet。 需要引入的 jar 文件：commons-...
web前端:上传文件夹(需支持多浏览器)
weixin_45525177的博客
05-27 406
javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求，也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data"> <div class=...
前端文件上传功能实战——前端实现（中）
最新发布
m0_74823094的博客
12-25 796
文件hash是一个CPU密集型任务，所以只会在任务被启动时才进行计算，确保主线程不会被阻塞，，因为计算hash涉及了IO操作，所以是异步的，为了防止在读取文件的过程中又一次的对reader进行重新赋值，我们可以对reader进行一个缓存处理，如果后续还需要hash，则可以将之前已经计算好的hash直接返回，而不需要重新计算，具体实现如下。每一个分片都需要上传到服务器上，每一个上传都是一个任务——即Task类，我们通过Task实例来执行上传任务，包括当前分片上传进度的监控，取消当前分片的上传等功能。
前端VUE实战——去哪儿网项目实战.7z
08-17
在本项目中，我们将深入探讨基于Vue.js框架的前端实战应用——去哪儿网项目。Vue.js是一个轻量级、高性能的JavaScript框架，专为构建用户界面而设计，特别适合开发单页面应用（SPA）。通过这个实战项目，我们可以...
微信小程序前端设计实战 ————高校新闻网
y_y_z_y_y_z的博客
09-02 1854
新闻 前端 微信小程序 轮播图 缓存
【文件上传 前端】文件上传 前端 Part1 —— 传统表单上传
weixin_30843605的博客
09-29 136
<!DOCTYPE HTML> <html> <head> <meta content="text/html" charset="utf-8" /> <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-s...
上传单文件的前端代码实现
lxxa12的博客
11-27 280
<form class="file-box" style="position: absolute;top:50%;transform: translateY(-50%)"> <input type="file"multiple="multiple"class="file-btn"id="pic"name="pic" > </form> $('.file-btn').on('change', uploadFile); function upl...
前端大文件上传代码
weixin_45525177的博客
01-18 224
用户本地有一份txt或者csv文件，无论是从业务数据库导出、还是其他途径获取，当需要使用蚂蚁的大数据分析工具进行数据加工、挖掘和共创应用的时候，首先要将本地文件上传至ODPS，普通的小文件通过浏览器上传至服务器，做一层中转便可以实现，但当这份文件非常大到了10GB级别，我们就需要思考另一种形式的技术方案了，也就是本文要阐述的方案。分片上传的好处是将一个大请求分成多个小请求来执行，这样当其中一些请求失败后，不需要重新上传整个文件，而只需要上传失败的分片就可以了。客户端向服务器端发起获得授权的请求。
文件上传(前端篇)
hello_qaz123的博客
05-07 392
多个、文件上传（input、前端篇）
前端文件夹上传源码
weixin_45525177的博客
06-13 600
第一点：Java代码实现文件上传FormFile file = manform.getFile();String newfileName = null;String newpathname = null;String fileAddre = "/numUp";try{ InputStream stream = file.getInputStream();// 把文件读入 String filePath = request.getRealPath(fileAddre);//取系统当前路径 F
前端大文件上传解决方案实例代码
weixin_45525177的博客
09-20 258
HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。目前在WWW中使用的是HTTP/1.0的第六版，HTTP/1.1的规范化工作正在进行之中，而且HTTP-NG(Next Generation of HTTP)的建议已经提出。(5)无状态：HTTP协议是无状态协议。前言：因自己负责的项目(jetty内嵌启动的SpringMvc)中需要实现文件上传，而自己对java文件上传这一块未接触过，且对 Http 协议较模糊，故这次采用渐进的方式来学习文件上传的原理与实践。
文件上传-前端上传文件到服务器（form表单）
weixin_48879122的博客
09-02 3886
本篇博客详细的讲述了怎么上传单文件和多文件的方法和步骤。
Web端实现用户文件上传
m0_57538148的博客
03-19 751
servlet实现文件上传至Tomcat服务器
Java实现前端文件上传
tanxinji的博客
07-06 1471
 前端通过Vue中$ref获取文件数据，后端使用用MultipartFile类型接受文件。实现的是存放在本地，可以修改为存到hdfs，云服务器上。  前端代码:  返回到前端的数据  控制层: 将文件上传到本地。   ...
HTML5前端学习：定位应用实战——小米官网模拟
"这篇内容是关于HTML5前端学习的，主要聚焦在第二周的Day10，即定位技术的实践应用。作者通过模仿小米官网的布局来加深对定位的理解，内容涉及CSS中...这对于创建响应式网页布局、实现动态效果等前端开发任务至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值