news 2026/8/21 1:42:27

jQuery如何实现网页大文件上传的进度显示?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
jQuery如何实现网页大文件上传的进度显示?

大文件传输功能解决方案探索与规划

作为上海一家专注于软件和信息技术服务领域,且在 2019 年完成战略融资的企业,我们一直致力于为客户提供高质量、安全可靠的软件解决方案。近期,公司项目面临一个极具挑战性的需求:构建一个大文件传输功能模块,以满足政府和集团单位客户对数据传输与存储的严苛要求。

需求剖析

大文件传输能力

客户要求支持高达 50G 左右文件的传输,涵盖文件和文件夹的上传与下载功能。其中,文件夹传输必须完整保留层级结构,确保数据在传输前后的组织形式一致,这对于客户管理复杂的数据体系至关重要。

断点续传与高稳定性

断点续传功能是核心需求之一,不仅要支持在传输过程中因网络波动等原因导致的中断后继续传输,还需在刷新浏览器甚至关闭浏览器后,进度信息不丢失。客户对系统稳定性要求极高,任何因传输中断导致的数据丢失或重复传输都可能影响业务连续性,造成不可估量的损失。

加密传输与存储

鉴于客户单位对数据安全性的极高要求,文件在传输和存储过程中必须进行加密处理。我们需支持 SM4 国密和 AES 两种加密算法,确保数据在各个环节都处于安全防护之下,防止数据泄露和恶意篡改。

信创国产化环境兼容

为满足国内信创产业发展要求,该功能模块必须全面支持信创国产化环境。这包括兼容主流浏览器,如古老的 IE8 以及信创国产浏览器(龙芯浏览器、红莲花浏览器、奇安信安全浏览器);适配信创国产化操作系统,如统信 UOS、中标麒麟、银河麒麟;同时,数据库方面要支持主流产品(SQL Server、MySQL、Oracle)和国产化产品(达梦、人大金仓)。

私有部署与成本考量

由于项目部署在内网,客户数据严格保密不对外,因此需要支持私有部署。考虑到公司每年项目数量众多,约 2000 +,若采用单套授权方式,不仅成本高昂,管理起来也极为繁琐。领导层决定采购产品源代码,由公司研发部门负责后续开发与维护,以便直接应用于所有产品和项目,满足产品部门的自研需求。

现有方案调研与困境

在前期调研中,我们考察了市场上一些开源组件,如百度开源的大文件上传组件 WebUploader。然而,该组件已停更,缺乏技术支持,遇到问题无法及时解决,这给项目带来极大风险,公司不敢轻易采用。其他开源组件也普遍存在类似问题,没有可靠的技术支持渠道,一旦在使用过程中出现问题,可能陷入无法解决的困境,严重影响项目进度和客户满意度。

解决方案规划

技术选型与架构设计

基于公司现有技术栈,后端采用.NET Core,前端使用 vue2 cli 框架,我们将设计一个高效、稳定、安全的大文件传输架构。该架构将分为前端交互层、后端服务层和数据存储层,各层之间通过清晰的接口进行通信,确保系统的可扩展性和可维护性。

断点续传实现

为实现高稳定性的断点续传功能,我们将在前端和后端协同工作。前端使用 HTML5 的 File API 和 Blob 对象,将大文件分割成多个小块进行传输。同时,利用 localStorage 或 IndexedDB 存储传输进度信息,确保在刷新或关闭浏览器后能够恢复传输。以下是一个简单的前端代码示例,用于分割文件和记录进度:

大文件上传示例 开始上传 const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB let file; let uploadedChunks = []; document.getElementById('fileInput').addEventListener('change', function (e) { file = e.target.files[0]; }); function startUpload() { if (!file) return; const totalChunks = Math.ceil(file.size / CHUNK_SIZE); // 尝试从 localStorage 恢复已上传的块信息 const savedUploadedChunks = localStorage.getItem(`${file.name}_uploadedChunks`); if (savedUploadedChunks) { uploadedChunks = JSON.parse(savedUploadedChunks); } for (let i = 0; i < totalChunks; i++) { if (!uploadedChunks.includes(i)) { uploadChunk(i); } } } function uploadChunk(chunkIndex) { const start = chunkIndex * CHUNK_SIZE; const end = Math.min(start + CHUNK_SIZE, file.size); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('file', chunk); formData.append('fileName', file.name); formData.append('chunkIndex', chunkIndex); formData.append('totalChunks', Math.ceil(file.size / CHUNK_SIZE)); // 这里使用 fetch 模拟上传,实际项目中可使用 axios 等库 fetch('/upload', { method: 'POST', body: formData }).then(response => response.json()) .then(data => { if (data.success) { uploadedChunks.push(chunkIndex); localStorage.setItem(`${file.name}_uploadedChunks`, JSON.stringify(uploadedChunks)); console.log(`块 ${chunkIndex} 上传成功`); } }) .catch(error => { console.error(`块 ${chunkIndex} 上传失败:`, error); }); }

后端服务层将接收文件块,验证其完整性,并记录已接收的块信息。同时,提供接口供前端查询传输进度,以便在需要时恢复传输。

加密传输与存储实现

在传输过程中,我们将使用 SSL/TLS 协议对数据进行加密,确保数据在网络传输过程中的安全性。对于文件存储,我们将在后端实现 SM4 国密和 AES 加密算法,对上传的文件进行加密处理后再存储到数据库或文件系统中。以下是一个简单的.NET Core 后端代码示例,用于实现 AES 加密:

using System; using System.IO; using System.Security.Cryptography; using System.Text; public class AesEncryption { private static readonly byte[] Key = Encoding.UTF8.GetBytes("Your - 32 - byte - key - here - 1234567890ab"); // 32 字节密钥 private static readonly byte[] IV = Encoding.UTF8.GetBytes("Your - 16 - byte - iv - here"); // 16 字节初始化向量 public static byte[] Encrypt(byte[] plainBytes) { using (Aes aesAlg = Aes.Create()) { aesAlg.Key = Key; aesAlg.IV = IV; ICryptoTransform encryptor = aesAlg.CreateEncryptor(aesAlg.Key, aesAlg.IV); using (MemoryStream msEncrypt = new MemoryStream()) { using (CryptoStream csEncrypt = new CryptoStream(msEncrypt, encryptor, CryptoStreamMode.Write)) { csEncrypt.Write(plainBytes, 0, plainBytes.Length); csEncrypt.FlushFinalBlock(); return msEncrypt.ToArray(); } } } } public static byte[] Decrypt(byte[] cipherBytes) { using (Aes aesAlg = Aes.Create()) { aesAlg.Key = Key; aesAlg.IV = IV; ICryptoTransform decryptor = aesAlg.CreateDecryptor(aesAlg.Key, aesAlg.IV); using (MemoryStream msDecrypt = new MemoryStream(cipherBytes)) { using (CryptoStream csDecrypt = new CryptoStream(msDecrypt, decryptor, CryptoStreamMode.Read)) { using (MemoryStream outputMs = new MemoryStream()) { csDecrypt.CopyTo(outputMs); return outputMs.ToArray(); } } } } } }

信创国产化环境适配

为确保系统在信创国产化环境中的兼容性,我们将进行全面的测试和优化。针对不同浏览器和操作系统,调整前端代码的兼容性,确保功能在各种环境下都能正常运行。同时,与数据库厂商合作,确保数据库连接和操作在国产化数据库上的稳定性和性能。

私有部署与源代码采购

我们将积极寻找提供源代码授权的供应商,评估其产品的质量、技术支持能力和价格合理性。在采购源代码后,组织研发部门进行深入学习和二次开发,根据项目需求进行定制化修改,确保系统完全满足公司业务和客户要求。

通过以上规划,我们有信心构建一个高效、稳定、安全的大文件传输功能模块,满足公司项目需求,为客户提供优质的服务,进一步提升公司在软件和信息技术服务领域的竞争力。

设置框架

安装.NET Framework 4.7.2
https://dotnet.microsoft.com/en-us/download/dotnet-framework/net472
框架选择4.7.2

添加3rd引用

编译项目

NOSQL

NOSQL无需任何配置可直接访问页面进行测试

SQL

使用IIS
大文件上传测试推荐使用IIS以获取更高性能。

使用IIS Express

小文件上传测试可以使用IIS Express

创建数据库

配置数据库连接信息

检查数据库配置

访问页面进行测试


相关参考:
文件保存位置,

效果预览

文件上传

文件刷新续传

支持离线保存文件进度,在关闭浏览器,刷新浏览器后进行不丢失,仍然能够继续上传

文件夹上传

支持上传文件夹并保留层级结构,同样支持进度信息离线保存,刷新页面,关闭页面,重启系统不丢失上传进度。

下载完整示例

下载完整示例

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/8/21 14:26:36

Postman接口自动化测试—批量参数化(参数文件)

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快Postman接口请求中的参数引用格式&#xff1a;{{参数名}}参数文件只适用于集合中。创建参数文件以记事本举例&#xff0c;也可以使用其他编辑器&#xff1b;第一行…

作者头像 李华
网站建设 2026/8/21 3:26:48

超强实战:5个技巧让你彻底掌握Lua JSON解析与数据转换

超强实战&#xff1a;5个技巧让你彻底掌握Lua JSON解析与数据转换 【免费下载链接】lua-cjson Lua CJSON is a fast JSON encoding/parsing module for Lua 项目地址: https://gitcode.com/gh_mirrors/lu/lua-cjson Lua CJSON模块为Lua开发者提供了高效的JSON编码和解析…

作者头像 李华
网站建设 2026/8/21 22:15:58

VCR测试工具完整入门指南:从零掌握HTTP交互录制技术

VCR测试工具完整入门指南&#xff1a;从零掌握HTTP交互录制技术 【免费下载链接】vcr Record your test suites HTTP interactions and replay them during future test runs for fast, deterministic, accurate tests. 项目地址: https://gitcode.com/gh_mirrors/vc/vcr …

作者头像 李华
网站建设 2026/8/21 17:42:13

1、树莓派特工指南:开启神秘之旅

树莓派特工指南:开启神秘之旅 1. 树莓派简介 树莓派最初旨在促进学校的基础计算机科学教育,同时它也让人们回归到简单、有趣且开放的计算体验中。仅需 25 英镑的树莓派电脑和一些常见的 USB 设备,任何人都能摇身一变成为“秘密特工”。 2. 树莓派型号 树莓派有多种型号可…

作者头像 李华
网站建设 2026/8/21 8:12:42

2、树莓派入门全攻略:从版本选择到SD卡准备

树莓派入门全攻略:从版本选择到SD卡准备 1. 树莓派简介 树莓派是由英国非营利组织树莓派基金会开发的一款信用卡大小的计算机。它的诞生源于Eben Upton和他在剑桥大学计算机实验室的同事们的讨论,他们希望能让80年代家用计算机(如BBC Micro、ZX Spectrum和Commodore 64)上…

作者头像 李华
网站建设 2026/8/21 15:32:26

7天轻松掌握Thinking-Claude:AI对话质量提升完全指南

7天轻松掌握Thinking-Claude&#xff1a;AI对话质量提升完全指南 【免费下载链接】Thinking-Claude Let your Claude able to think 项目地址: https://gitcode.com/gh_mirrors/th/Thinking-Claude 想要让Claude从简单的问答机器人变成你的专属思考伙伴吗&#xff1f;Th…

作者头像 李华