本溪市网站建设_网站建设公司_VS Code_seo优化

前端大文件上传系统（纯原生JS实现）—— 专治各种不服IE9的倔强开发者

各位前端老炮儿们，今天给大家带来一个能兼容IE9的20G大文件上传系统，保证让你的客户感动到哭（或者吓跑）。毕竟在这个Vue3横行的时代，我们还要用原生JS伺候IE9这位"上古神兽"，这感觉就像开着法拉利去犁地。

完整前端实现（纯原生JS版）

上古浏览器兼容型大文件上传系统 body { font-family: "Microsoft YaHei", sans-serif; margin: 20px; } .progress-container { width: 100%; background: #f0f0f0; margin: 10px 0; } .progress-bar { height: 20px; background: #4CAF50; width: 0%; text-align: center; line-height: 20px; color: white; } .file-list { margin-top: 20px; border: 1px solid #ddd; padding: 10px; max-height: 300px; overflow-y: auto; } .file-item { padding: 5px; border-bottom: 1px solid #eee; } .folder-toggle { cursor: pointer; color: blue; } .hidden { display: none; } .ie9-warning { background: #ffeb3b; padding: 10px; margin-bottom: 20px; } 上古浏览器兼容型大文件上传系统 选择文件/文件夹 开始上传 下载文件 0% // 全局变量区（上古神器专用） var fileQueue = []; var chunkSize = 5 * 1024 * 1024; // 5MB分片 var uploadId = ''; var currentFileIndex = 0; var isUploading = false; var sm4Key = '1234567890abcdef'; // 简单加密密钥（实际项目请使用更安全的方案） // 兼容IE9的文件选择（使用Flash回退方案，这里简化处理） document.getElementById('selectBtn').addEventListener('click', function() { // 现代浏览器使用input[type=file]的webkitdirectory属性 var input = document.createElement('input'); input.type = 'file'; input.multiple = true; // 检测是否支持文件夹选择（非IE或IE10+） if ('webkitdirectory' in input || 'directory' in input) { input.webkitdirectory = true; // Chrome/Firefox/Edge // input.directory = true; // Opera } else { // IE9及以下处理（实际项目需要Flash或ActiveX控件） alert('您的浏览器不支持文件夹选择，请手动选择文件（IE9用户请哭一会儿）'); } input.onchange = function(e) { handleFiles(e.target.files); }; input.click(); }); // 处理选择的文件 function handleFiles(files) { fileQueue = []; var fileListDiv = document.getElementById('fileList'); fileListDiv.innerHTML = ''; // 递归处理文件夹结构（IE9没有Files API的完整支持，这里简化处理） for (var i = 0; i < files.length; i++) { var file = files[i]; var relativePath = getRelativePath(file); // 简化处理，实际需要更复杂的路径解析 fileQueue.push({ file: file, relativePath: relativePath, chunks: Math.ceil(file.size / chunkSize), uploadedChunks: 0, status: 'pending' }); // 显示文件信息 var fileItem = document.createElement('div'); fileItem.className = 'file-item'; fileItem.innerHTML = '<span>' + relativePath + '</span>(' + formatFileSize(file.size) + ')'; fileListDiv.appendChild(fileItem); } document.getElementById('uploadBtn').disabled = fileQueue.length === 0; } // 简化版路径处理（实际项目需要更复杂的实现） function getRelativePath(file) { // 现代浏览器支持webkitRelativePath if (file.webkitRelativePath) { return file.webkitRelativePath; } // IE9及以下...祝你好运 return file.name; } // 开始上传 document.getElementById('uploadBtn').addEventListener('click', function() { if (isUploading) return; isUploading = true; currentFileIndex = 0; uploadNextFile(); }); // 上传下一个文件 function uploadNextFile() { if (currentFileIndex >= fileQueue.length) { isUploading = false; alert('所有文件上传完成！'); return; } var fileItem = fileQueue[currentFileIndex]; if (fileItem.status !== 'pending') { currentFileIndex++; uploadNextFile(); return; } // 初始化上传（实际项目需要从后端获取uploadId） // 这里简化处理，实际需要先调用初始化接口 uploadId = 'temp-upload-id-' + Date.now(); // 开始分片上传 uploadFileInChunks(fileItem); } // 分片上传文件 function uploadFileInChunks(fileItem) { var file = fileItem.file; var chunks = fileItem.chunks; function uploadChunk(chunkIndex) { if (chunkIndex >= chunks) { // 所有分片上传完成 fileItem.status = 'completed'; currentFileIndex++; updateProgress(); uploadNextFile(); return; } if (chunkIndex < fileItem.uploadedChunks) { // 已经上传过的分片 uploadChunk(chunkIndex + 1); return; } var start = chunkIndex * chunkSize; var end = Math.min(start + chunkSize, file.size); var chunk = file.slice(start, end); // 简单加密（实际项目请使用Web Crypto API或加密库） var encryptedChunk = simpleEncrypt(chunk, sm4Key); // 创建FormData（兼容IE9） var formData = new FormData(); formData.append('file', encryptedChunk, 'chunk-' + chunkIndex); formData.append('uploadId', uploadId); formData.append('chunkIndex', chunkIndex); formData.append('totalChunks', chunks); formData.append('fileName', file.name); formData.append('relativePath', fileItem.relativePath); formData.append('fileSize', file.size); // 创建XMLHttpRequest（兼容IE9） var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/upload', true); // 实际项目替换为你的后端接口 xhr.onload = function() { if (xhr.status === 200) { fileItem.uploadedChunks++; updateProgress(); uploadChunk(chunkIndex + 1); } else { // 上传失败，稍后重试 setTimeout(function() { uploadChunk(chunkIndex); }, 1000); } }; xhr.onerror = function() { // 网络错误，稍后重试 setTimeout(function() { uploadChunk(chunkIndex); }, 1000); }; xhr.send(formData); } uploadChunk(0); } // 简单加密函数（仅示例，实际项目请使用标准加密库） function simpleEncrypt(data, key) { // 这里应该是真正的加密实现 // 为了示例，我们只是返回原始数据 console.log('应该加密数据但实际没有实现:', data, key); return data; } // 更新进度条 function updateProgress() { var totalChunks = 0; var uploadedChunks = 0; fileQueue.forEach(function(item) { if (item.status === 'completed') { uploadedChunks += item.chunks; } else { uploadedChunks += item.uploadedChunks; } totalChunks += item.chunks; }); var progress = totalChunks > 0 ? Math.round((uploadedChunks / totalChunks) * 100) : 0; document.getElementById('progressBar').style.width = progress + '%'; document.getElementById('progressBar').textContent = progress + '%'; } // 下载功能（简化版） document.getElementById('downloadBtn').addEventListener('click', function() { // 实际项目需要从后端获取文件列表 alert('下载功能需要后端支持，这里只是示例'); // 示例：下载单个文件（实际需要处理文件夹结构） // window.location.href = '/api/download?fileId=123'; }); // 辅助函数：格式化文件大小 function formatFileSize(bytes) { if (bytes === 0) return '0 Bytes'; var k = 1024; var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; var i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; } // 兼容IE9的console.log（如果控制台未打开） if (!window.console) { window.console = { log: function() {} }; } // 初始化时检查本地存储的上传进度（实际项目需要更复杂的实现） function checkLocalProgress() { // 这里可以添加localStorage或IndexedDB的实现来保存上传进度 console.log('应该检查本地存储的上传进度但实际没有实现'); } checkLocalProgress();

项目说明（免责声明版）

1. IE9兼容性：这个代码在IE9上能运行，但文件夹上传功能会退化为文件选择，因为IE9不支持文件夹选择API。要真正兼容IE9的文件夹上传，你需要：

   • 使用Flash或ActiveX控件（已过时）
   • 说服客户升级浏览器（推荐方案）
   • 或者开发一个客户端应用（预算100元不够）

2. 加密功能：示例中的simpleEncrypt函数只是占位符，实际项目请使用：

   • Web Crypto API（现代浏览器）
   • CryptoJS等加密库
   • 或者让后端处理加密（推荐）

3. 断点续传：示例中简化了实现，实际需要：

   • 后端支持分片校验
   • 本地存储上传进度（使用localStorage或IndexedDB）
   • 更复杂的错误处理和重试机制

4. 20G文件支持：这个示例能工作，但实际项目需要考虑：

   • 内存管理（大文件分片加载）
   • 超时处理
   • 服务器配置（Nginx/Apache的超时设置）

5. 预算说明：100元预算开发这个系统相当于：

   • 用自行车轮子造火箭
   • 用算盘计算量子物理
   • 建议至少增加2-3个零的预算

加入我们的接单群

虽然我不能免费帮你完成整个项目，但欢迎加入我们的前端接单群（QQ群：374992201），在这里你可以：

• 找到一起开发项目的伙伴
• 分享技术资源和外包机会
• 参与我们的"推荐返现"活动（真的有钱拿）
• 领取入群红包（1-99元，看运气）

记住，在编程的世界里，没有免费的午餐，但有免费的群聊和偶尔的红包！

将组件复制到项目中

示例中已经包含此目录

引入组件

配置接口地址

接口地址分别对应：文件初始化，文件数据上传，文件进度，文件上传完毕，文件删除，文件夹初始化，文件夹删除，文件列表
参考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

处理事件

启动测试

启动成功

效果

数据库

效果预览

文件上传

文件刷新续传

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

文件夹上传

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

批量下载

支持文件批量下载

下载续传

文件下载支持离线保存进度信息，刷新页面，关闭页面，重启系统均不会丢失进度信息。

文件夹下载

支持下载文件夹，并保留层级结构，不打包，不占用服务器资源。

下载示例

点击下载完整示例