当前位置：首页 > news >正文

PHP续传大文件时进度条如何同步更新？

news 2026/5/11 23:59:40

大文件上传系统开发指南（PHP+原生JS）

项目概述

兄弟，你这需求可真够硬的！20G文件上传、文件夹层级保留、全浏览器兼容、加密传输存储、断点续传…这活儿不轻松啊！不过既然你找到我了，咱们就一起啃下这块硬骨头。

系统架构

前端：Vue3 CLI + 原生JS（因为要兼容IE8，Vue部分可能得悠着点用）
后端：PHP + MySQL
文件处理：Apache服务器本地存储
加密：SM4/AES加密传输和存储
特色：文件夹层级保留、断点续传、多浏览器兼容

前端实现（原生JS为主）

HTML部分 (index.html)

大文件上传系统 .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 20px; } .file-list { margin: 20px; border: 1px solid #eee; padding: 10px; max-height: 300px; overflow-y: auto; } .progress-container { width: 100%; background: #f0f0f0; margin: 5px 0; } .progress-bar { height: 20px; background: #4CAF50; width: 0%; text-align: center; line-height: 20px; color: white; } .folder-tree { margin: 20px; padding: 10px; border: 1px solid #ddd; } 大文件上传系统 选择文件/文件夹 开始上传 暂停 继续 文件夹结构 上传队列

原生JS核心 (uploader.js)

// 全局变量varfileQueue=[];varcurrentUploads={};varchunkSize=5*1024*1024;// 5MB每片varuploadPaused=false;// 处理文件选择（支持文件夹）document.getElementById('fileInput').addEventListener('change',function(e){varfiles=e.target.files;if(files.length===0)return;// 显示文件夹结构document.getElementById('folderTree').style.display='block';buildFolderTree(files);// 添加到上传队列for(vari=0;i<files.length;i++){varfile=files[i];fileQueue.push({file:file,relativePath:getRelativePath(file),status:'pending',progress:0,uploadedChunks:0,totalChunks:Math.ceil(file.size/chunkSize),fileId:generateFileId(file)});}updateQueueDisplay();});

后端实现 (PHP)

upload.php (处理文件分片上传)

complete.php (合并文件)

false,'message'=>'文件合并失败']);exit;}echojson_encode(['success'=>true,'filePath'=>$targetFilePath]);?>

download.php (处理文件下载)

数据库设计

虽然这个示例主要使用文件系统存储，但如果你需要数据库记录，可以这样设计：

CREATETABLE`uploaded_files`(`id`int(11)NOTNULLAUTO_INCREMENT,`file_id`varchar(255)NOTNULL,`original_name`varchar(255)NOTNULL,`relative_path`varchar(1000)NOTNULL,`file_size`bigint(20)NOTNULL,`upload_date`datetimeNOTNULL,`user_id`int(11)DEFAULTNULL,`is_encrypted`tinyint(1)DEFAULT1,`status`enum('uploading','completed','failed')NOTNULLDEFAULT'uploading',PRIMARYKEY(`id`),UNIQUEKEY`file_id`(`file_id`),KEY`relative_path`(`relative_path`(255)))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;CREATETABLE`file_chunks`(`id`int(11)NOTNULLAUTO_INCREMENT,`file_id`varchar(255)NOTNULL,`chunk_index`int(11)NOTNULL,`upload_date`datetimeNOTNULL,PRIMARYKEY(`id`),UNIQUEKEY`file_chunk`(`file_id`,`chunk_index`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4;

兼容性处理

IE8兼容性方案

由于IE8不支持很多现代API，我们需要做以下兼容：

XMLHttpRequest：使用ActiveXObject

functioncreateXHR(){if(window.XMLHttpRequest){returnnewXMLHttpRequest();}elseif(window.ActiveXObject){try{returnnewActiveXObject("Msxml2.XMLHTTP");}catch(e){try{returnnewActiveXObject("Microsoft.XMLHTTP");}catch(e){returnnull;}}}returnnull;}

FileReader：IE8不支持，需要使用Flash或iframe上传

// 简化示例：使用iframe上传作为回退方案functionsetupIE8Upload(){varform=document.createElement('form');form.method='post';form.enctype='multipart/form-data';form.target='upload_iframe';form.action='upload_ie8.php';variframe=document.createElement('iframe');iframe.name='upload_iframe';iframe.style.display='none';document.body.appendChild(iframe);varfileInput=document.getElementById('fileInput');form.appendChild(fileInput.cloneNode(true));document.body.appendChild(form);// 这里需要更复杂的处理来跟踪上传状态}

JSON：引入json2.js

部署说明

将前端文件放在web目录下
创建uploads和temp_uploads目录并确保有写入权限

配置Apache支持大文件上传（修改php.ini）：

upload_max_filesize = 20G post_max_size = 20G max_execution_time = 3600 max_input_time = 3600 memory_limit = 512M

完整项目结构

/project-root /css style.css /js uploader.js ie8-fallback.js json2.js (可选) /uploads (自动创建) /temp_uploads (自动创建) index.html upload.php complete.php download.php upload_ie8.php (IE8回退方案)