news 2026/2/22 8:28:03

网页开发中，有哪些插件或控件能实现文件上传下载的解决方案？

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
网页开发中，有哪些插件或控件能实现文件上传下载的解决方案？

一个被20G文件折磨的.NET程序员的求生指南

“甲方爸爸说要兼容IE8？还要20G文件上传？预算100块？” —— 当我看到需求文档时，手里的泡面突然就不香了…🍜

技术方案：在刀尖上跳舞

前端部分：与IE8老爷爷斗智斗勇

// 文件分片上传核心代码（纯手工打造，兼容IE8版）functionuploadFile(file){// IE8特供版检测if(navigator.userAgent.indexOf('MSIE 8.0')>-1){alert('尊敬的用户，检测到您正在使用IE8，我们将为您启用特殊兼容模式...');// 其实就是降级方案...returnie8SpecialUpload(file);}constCHUNK_SIZE=5*1024*1024;// 5MB一片letchunks=Math.ceil(file.size/CHUNK_SIZE);letuploaded=0;// 加密相关（SM4/AES）letcrypto=newSuperCrypto('SM4');// 这个类当然是我编的...for(leti=0;i<chunks;i++){letstart=i*CHUNK_SIZE;letend=Math.min(start+CHUNK_SIZE,file.size);letchunk=file.slice(start,end);// 加密分片letencryptedChunk=crypto.encrypt(chunk);letformData=newFormData();formData.append('file',encryptedChunk);formData.append('chunkIndex',i);formData.append('totalChunks',chunks);formData.append('fileName',file.name);formData.append('fileSize',file.size);// 这里应该是AJAX调用，但为了兼容IE8...letxhr=newXMLHttpRequest();xhr.open('POST','/api/upload',true);xhr.onload=function(){uploaded++;updateProgress(uploaded/chunks*100);saveProgressToLocalStorage(file.name,uploaded);};xhr.send(formData);}}// IE8特供版上传（Flash后备方案）functionie8SpecialUpload(file){// 这里应该有Flash上传代码...alert('请安装Flash Player 10.1或更高版本');returnfalse;}

后端部分：C# WebForm的救赎

// UploadHandler.ashx 文件上传处理publicclassUploadHandler:IHttpHandler{publicvoidProcessRequest(HttpContextcontext){try{// 获取上传的文件分片HttpPostedFilefile=context.Request.Files["file"];intchunkIndex=int.Parse(context.Request["chunkIndex"]);inttotalChunks=int.Parse(context.Request["totalChunks"]);stringfileName=context.Request["fileName"];longfileSize=long.Parse(context.Request["fileSize"]);// 解密处理byte[]fileData=newbyte[file.InputStream.Length];file.InputStream.Read(fileData,0,fileData.Length);byte[]decryptedData=CryptoHelper.SM4Decrypt(fileData,"密钥");// 临时保存分片stringtempPath=Path.Combine("E:\\UploadTemp",fileName);if(!Directory.Exists(tempPath))Directory.CreateDirectory(tempPath);stringchunkPath=Path.Combine(tempPath,chunkIndex.ToString());File.WriteAllBytes(chunkPath,decryptedData);// 检查是否所有分片都已上传if(Directory.GetFiles(tempPath).Length==totalChunks){// 合并文件MergeFile(tempPath,"E:\\Uploads\\"+fileName);Directory.Delete(tempPath,true);// 记录到数据库SaveToDb(fileName,fileSize,"E:\\Uploads\\"+fileName);}context.Response.Write("{\"status\":\"ok\"}");}catch(Exceptionex){context.Response.Write("{\"status\":\"error\",\"message\":\""+ex.Message+"\"}");}}privatevoidMergeFile(stringtempPath,stringtargetPath){// 这里应该有合并文件的代码...}privatevoidSaveToDb(stringfileName,longfileSize,stringfilePath){// 这里应该有数据库操作代码...}}

开发血泪史

  1. IE8兼容性：我尝试了各种黑魔法，最后发现唯一的解决方案是…建议用户换电脑（当然这话不能跟甲方说）

  2. 20G文件上传：我的开发机只有256G SSD，测试时差点把自己电脑搞崩溃

  3. 加密传输：SM4在JavaScript端的实现让我掉了不少头发

文件夹上传的终极解决方案

// 文件夹上传保留层级结构functionuploadFolder(event){letfiles=event.target.files;letfolderStructure={};// 构建文件夹结构for(leti=0;i<files.length;i++){letfile=files[i];if(file.webkitRelativePath){letpaths=file.webkitRelativePath.split('/');letcurrentLevel=folderStructure;for(letj=0;j<paths.length-1;j++){if(!currentLevel[paths[j]]){currentLevel[paths[j]]={};}currentLevel=currentLevel[paths[j]];}currentLevel[paths[paths.length-1]]=file;}}// 递归上传uploadFolderItem(folderStructure,'');}functionuploadFolderItem(item,currentPath){for(letkeyinitem){if(item[key]instanceofFile){// 上传文件uploadFile(item[key],currentPath);}else{// 创建文件夹createFolderOnServer(currentPath+key+'/');// 递归上传子项uploadFolderItem(item[key],currentPath+key+'/');}}}

数据库设计（SQL Server版）

-- 文件记录表CREATETABLEFileRecords(Id UNIQUEIDENTIFIERPRIMARYKEYDEFAULTNEWID(),FileName NVARCHAR(255)NOTNULL,FileSizeBIGINTNOTNULL,FilePath NVARCHAR(MAX)NOTNULL,UploadTimeDATETIMEDEFAULTGETDATE(),IsEncryptedBITDEFAULT1,EncryptionType NVARCHAR(50)DEFAULT'SM4');-- 上传进度表（用于断点续传）CREATETABLEUploadProgress(SessionId NVARCHAR(255)PRIMARYKEY,FileName NVARCHAR(255)NOTNULL,FileMd5 NVARCHAR(255)NOTNULL,TotalChunksINTNOTNULL,UploadedChunksINTNOTNULL,LastUpdateTimeDATETIMEDEFAULTGETDATE());

给甲方爸爸的温馨Tips

  1. 关于IE8：真的不考虑升级一下吗？现在连微软都不支持IE8了…

  2. 关于20G文件：建议上传前先压缩，毕竟您家宽带上传20G可能需要一整天

  3. 关于100块预算：这个价格我们只能提供"心灵支持"服务了…

PS：那个QQ群真的存在，但红包可能已经被抢光了。至于"一个项目提成1万"…醒醒，该搬砖了！👷

设置框架

安装.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/2/17 7:46:29

数字人直播实战：Live Avatar结合Gradio轻松实现交互

数字人直播实战&#xff1a;Live Avatar结合Gradio轻松实现交互 1. 为什么选择Live Avatar做数字人直播&#xff1f; 你可能已经试过不少数字人方案——有的需要专业动捕设备&#xff0c;有的依赖云端API按秒计费&#xff0c;有的生成视频要等半小时。而今天要聊的这个项目&a…

作者头像 李华
网站建设 2026/2/19 19:53:47

还在手动配环境？Z-Image-Turbo镜像一键解决烦恼

还在手动配环境&#xff1f;Z-Image-Turbo镜像一键解决烦恼 你是不是也经历过这样的深夜&#xff1a; 想试试最新的文生图模型&#xff0c;结果光是装CUDA、配PyTorch、下载30G权重就耗掉两小时&#xff1b; 好不容易跑通第一行代码&#xff0c;又卡在torch.compile不兼容、Mo…

作者头像 李华
网站建设 2026/2/17 12:56:57

Python 使用 subprocess 检测 Linux 用户是否存在，不存在则自动创建

一、背景说明 在 Linux 服务器自动化运维、初始化脚本或容器环境中&#xff0c;经常需要判断某个系统用户是否存在&#xff1a; 如果存在&#xff1a;直接使用如果不存在&#xff1a;自动创建用户 本文介绍如何使用 Python 的 subprocess 模块&#xff0c;调用系统命令 id 和…

作者头像 李华
网站建设 2026/2/17 10:02:10

GitHub 热榜项目 - 日榜(2026-01-25)

GitHub 热榜项目 - 日榜(2026-01-25) 生成于&#xff1a;2026-01-25 统计摘要 共发现热门项目&#xff1a; 10 个 榜单类型&#xff1a;日榜 本期热点趋势总结 本期GitHub趋势显示AI工程化应用全面爆发&#xff0c;核心围绕智能体开发与多模态创新。AI智能体成为热点&…

作者头像 李华
网站建设 2026/2/19 3:05:40

FSMN-VAD对比传统方法：AI模型更抗噪

FSMN-VAD对比传统方法&#xff1a;AI模型更抗噪 你有没有遇到过这样的尴尬&#xff1f; 会议录音里&#xff0c;空调嗡嗡声、键盘敲击声、偶尔的咳嗽声&#xff0c;全被语音识别系统当成了“有效语音”&#xff0c;结果转写出来一堆乱码&#xff1b; 车载语音助手在高速行驶时…

作者头像 李华
网站建设 2026/2/17 4:46:51

基于深度学习的行人车辆流量统计算法研究

目录深度学习在行人车辆流量统计中的应用关键技术方法典型应用场景性能优化方向挑战与解决方案源码文档获取/同行可拿货,招校园代理 &#xff1a;文章底部获取博主联系方式&#xff01;深度学习在行人车辆流量统计中的应用 基于深度学习的行人车辆流量统计主要利用计算机视觉技…

作者头像 李华