PHP芯片制造超大附件上传时进度条如何实现？-开发者社区

《码农的10G文件上传历险记》

第一章：毕业设计之痛——当菜鸟遇上WebUploader

“老师说要支持10G文件上传？！我们系服务器硬盘总共才500G啊！”

技术选型血泪史

// 我的前端技术栈（全是坑）constmySkills={framework:'Vue3',// 只会用cli创建项目nativeJS:true,// 被迫的libraries:['WebUploader',// 百度出品，必属...坑品？'CryptoJS',// 加密用，希望别把文件加密成乱码'localStorage',// 断点续传的救命稻草'IE8Hack',// 专门伺候老爷机的黑科技],backend:'PHP',// 因为只会echo "Hello World"IDE:'Zend Studio',// 界面丑得让我想哭debugTools:['console.log',// 永远的神'alert',// IE8调试必备'佛祖保佑',// 最重要的调试工具]}

第二章：大文件上传之战——5MB一次的生死较量

前端核心代码（带血泪注释版）

// 大文件分片上传（兼容IE8的地狱级写法）functionuploadBigFile(file){// IE8特供处理（感谢比尔盖茨让我失业）if(!window.Blob){alert('检测到您在使用上古浏览器，建议升级到IE9或...换个电脑');return;}// 分片大小5MB（学校网速传10G要传到毕业典礼）constCHUNK_SIZE=5*1024*1024;constchunks=Math.ceil(file.size/CHUNK_SIZE);// 断点续传黑科技（localStorage + IndexedDB双保险）constresumeKey=`upload_${md5(file.name+file.size)}`;letuploaded=localStorage.getItem(resumeKey)||0;// 国产浏览器特供补丁（红莲花/麒麟/360极速...）if(/RedLotus|QiLin|360EE/.test(navigator.userAgent)){alert('检测到您在使用爱国浏览器，自动降级为2MB分片');CHUNK_SIZE=2*1024*1024;}// 开始上传（心跳加速）for(leti=uploaded;i<chunks;i++){conststart=i*CHUNK_SIZE;constend=Math.min(file.size,start+CHUNK_SIZE);constchunk=file.slice(start,end);// 加密分片（密码学是抄CSDN的）constencryptedChunk=CryptoJS.AES.encrypt(chunk.toString(),'山西刀削面天下第一',// 密钥{iv:'毕业设计要凉凉'}// 向量).toString();// 实际上传（此处应有紧张的音乐）if(!uploadChunk(encryptedChunk,i,chunks,file.name)){// 失败保存进度（希望能活到下次继续）localStorage.setItem(resumeKey,i);thrownewError('上传失败，可能是校长在下载电影');}}// 上传完成放烟花庆祝localStorage.removeItem(resumeKey);alert('上传成功！学分+0.1');}// 文件夹上传（递归噩梦）functionuploadFolder(folder){// 获取相对路径（IE8特供黑科技）constpath=folder.webkitRelativePath||magicGetPath(folder);// 神秘函数// 遍历文件夹内容（兼容各种奇葩浏览器）constfiles=folder.files||Array.from(folder.children).filter(item=>iteminstanceofFile);files.forEach(file=>{if(file.size>10*1024*1024*1024){if(confirm('文件太大，真的要上传吗？')){uploadBigFile(file);}}else{uploadFile(file,path);// 普通文件直接传}});}// IE8获取路径黑魔法functionmagicGetPath(file){// 此处省略100行兼容代码return'神秘路径/'+file.name;}

第三章：PHP后端历险记——从Hello World到文件加密

PHP后端核心代码（带求生欲注释版）

10*1024*1024*1024){die(json_encode(['error'=>'文件太大，建议删点校长的爱情动作片']));}// 解密处理（密码要和前端对上）$encryptedData=file_get_contents($_FILES['file']['tmp_name']);if($_POST['encrypted']=='true'){$data=decrypt($encryptedData,'山西刀削面天下第一','毕业设计要凉凉');}else{$data=$encryptedData;}// 安全检查（防止校长的炒股软件被覆盖）$path=str_replace('..','',$_POST['path']);$savePath='/uploads/'.$path;// 创建目录（755权限是抄的）if(!file_exists(dirname($savePath))){mkdir(dirname($savePath),0755,true);}// 保存文件（求求你别出错）if(file_put_contents($savePath,$data)===false){die(json_encode(['error'=>'写入失败，可能是磁盘满了']));}// 加密存储（再来一层保险）if($_POST['encrypt_store']=='true'){$encrypted=encrypt($data,'老陈醋加密','学号后六位');file_put_contents($savePath.'.enc',$encrypted);}echojson_encode(['success'=>true]);}// 加密函数（从某个神秘论坛抄的）functionencrypt($data,$key,$iv){// 此处省略50行让人看不懂的代码return$data;// 假装加密成功}// 断点续传检查接口functioncheckProgress(){$fileMd5=$_GET['file_md5'];$totalSize=$_GET['total_size'];// 查询数据库（现学的PDO）$db=newPDO('mysql:host=localhost;dbname=upload','root','123456');$stmt=$db->prepare('SELECT progress FROM uploads WHERE file_md5 = ?');$stmt->execute([$fileMd5]);$result=$stmt->fetch();echojson_encode(['progress'=>$result?$result['progress']:0]);}?>

第四章：阿里云OSS对接奇遇记

“什么？OSS的PHP SDK不支持IE8？！”

OSS上传兼容方案

// 前端直传OSS方案（绕不开的兼容问题）functionuploadToOSS(file,path){// 获取STS临时凭证（学校服务器每天重启三次）fetch('/api/oss-token').then(res=>res.json()).then(data=>{// 初始化WebUploader（百度救我！）constuploader=newWebUploader.create({// 此处省略20个参数server:'https://oss-cn-shanghai.aliyuncs.com',formData:{'OSSAccessKeyId':data.accessKeyId,'policy':data.policy,'Signature':data.signature,'key':path+file.name,'success_action_status':'200',},// IE8特供配置prepareNextFile:true,chunked:true,chunkSize:5*1024*1024,threads:3,// 并发数（学校网络开多了会爆炸）});// 添加文件（希望别报错）uploader.addFile(file);// 上传进度（心跳显示器）uploader.on('uploadProgress',function(file,percentage){console.log('上传进度：',percentage*100+'%');localStorage.setItem('oss_progress',percentage);});// 上传完成（可以松口气）uploader.on('uploadSuccess',function(file){alert('上传成功！学分+0.2');});// 上传失败（又要熬夜）uploader.on('uploadError',function(file,reason){alert('上传失败：'+reason);});}).catch(err=>{console.error('获取OSS token失败：',err);alert('获取凭证失败，可能是校长在重启服务器');});}

第五章：毕业答辩生存指南

“演示时千万别用IE8！别问我是怎么知道的…”

答辩保命三件套

演示预案：
- 正常版（Chrome/Firefox）
- 降级版（IE11/Edge）
- 灾难版（IE8，准备随时切换）

话术准备：

- 当上传卡住时： "这是特意演示的断点续传功能，请看我现在刷新页面..." - 当IE8崩溃时： "这充分证明了兼容IE8的技术挑战性，我的解决方案是..." - 当老师提问时： "这个问题涉及到计算机基础理论的深入应用...(然后开始背概念)"

应急方案：

// 终极保命代码functionemergencyDemo(){if(isIE8()){alert('检测到您在使用IE8，自动切换到演示视频模式');window.location.href='demo-video.html';}}

第六章：求职路上的骚操作

“简历上写’精通文件上传’会不会太low？”

简历包装艺术

## 项目经验 **超级文件管理系统（毕业设计）** - 实现了基于Web的**分布式大文件传输解决方案**（其实就是分片上传） - 开发了**多层次安全加密传输协议**（AES加密+base64编码） - 解决了**跨浏览器兼容性难题**（IE8都能跑，还有啥不能跑？） - **性能优化**：将10G文件上传时间从∞缩短到24小时（网速限制）

面试话术宝典

- 当被问及技术难点： "最大的挑战是保证在极端网络环境下的传输可靠性" （其实就是学校网络老断） - 当被问及项目收获： "深刻理解了文件传输协议的设计原理" （被坑多了自然就懂了） - 当被要求现场写代码： "我可以给您演示我的毕业设计作品" （赶紧打开提前准备好的演示页面）

后记：来自山西码农的终极忠告

终于做完了这个要命的毕业设计，总结几条血泪经验：

技术选型要谨慎：
- 说支持IE8的库都是骗人的！
- 百度开源组件文档可能比山西老陈醋还酸爽

开发心态要平和：

while(bug.exists()){drink('老陈醋');if(bug.stillExists()){cry();}}

求职要主动：
“师兄师姐们，求内推啊！我不仅能写代码，还能讲山西笑话活跃办公室气氛！”

最后送大家一句我们山西程序员的至理名言：
“编码如同和面，水多了加面，面多了加水，总有一天能和成！”

（PS：那个QQ群真不是我建的，但如果你找到了工作，记得请我吃刀削面啊！）

安装环境

PHP:7.2.14

调整块大小

NOSQL

NOSQL不需要任何配置，可以直接访问测试

SQL

创建数据库

您可以直接复制脚本进行创建

配置数据库连接

安装依赖

访问页面进行测试

数据表中的数据

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

免费下载示例

点击下载完整示例

PHP芯片制造超大附件上传时进度条如何实现？