`将用于显示上传进度。 #### 2. JavaScript 实现 接下来，我们编写JavaScript代码来处理文件选择和上传逻辑，并监控上传进度。 ```javascript function uploadFiles() { var files = document.getElementById('fileInput').files; var formData = new FormData(); // 创建一个进度条容器 var progressContainer = document.getElementById('progressContainer'); progressContainer.innerHTML = ''; // 清空之前的进度信息 // 遍历文件并添加到FormData for (var i = 0; i < files.length; i++) { formData.append('files[]', files[i]); // 为每个文件创建一个进度条 var progressBar = document.createElement('div'); progressBar.className = 'progress-bar'; progressBar.style.width = '0%'; progressBar.textContent = '上传中 ' + (i + 1) + '/' + files.length; progressContainer.appendChild(progressBar); // 使用XMLHttpRequest发送文件（或Fetch API，这里以XMLHttpRequest为例） var xhr = new XMLHttpRequest(); xhr.open('POST', 'upload.php', true); // 监听进度事件 xhr.upload.onprogress = function(e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; progressBar.style.width = percentComplete + '%'; progressBar.textContent = '上传中 ' + Math.round(percentComplete) + '%'; } }; // 监听完成事件 xhr.onload = function() { if (xhr.status === 200) { progressBar.style.backgroundColor = 'green'; progressBar.textContent = '上传成功'; } else { progressBar.style.backgroundColor = 'red'; progressBar.textContent = '上传失败'; } }; // 发送数据 xhr.send(formData); // 注意：由于浏览器限制，这里实际上应该为每个文件单独发送请求或使用更高级的方法如FormData的Blob切片 } // 注意：上面的代码在实际应用中可能因浏览器限制而无法同时处理多个大文件 // 更好的做法是使用库如Dropzone.js或Fine Uploader，它们提供了更健壮的上传处理和进度监控 } ``` ### 二、后端处理 在PHP后端，我们编写`upload.php`脚本来接收上传的文件。由于前端代码可能为每个文件单独发送请求，PHP脚本需要能够处理多个文件上传的情况。 ```php $fileName) { if ($files['error'][$index] == UPLOAD_ERR_OK) { $tmpName = $files['tmp_name'][$index]; $fileSize = $files['size'][$index]; $fileType = $files['type'][$index]; // 可以在这里添加更多的验证和错误处理 $filePath = $uploadDir . basename($fileName); if (move_uploaded_file($tmpName, $filePath)) { echo "文件 {$fileName} 上传成功。\n"; } else { echo "文件 {$fileName} 上传失败。\n"; } } } } ?> ``` ### 三、优化和注意事项 1. **大文件处理和并发限制**： - 浏览器对并发AJAX请求的数量有限制，这可能会影响大文件的上传。 - 对于大文件，可以考虑使用文件分片（Blob slicing）来分批次上传。 2. **安全性**： - 确保对上传的文件进行适当的验证和清理，以防止恶意文件上传。 - 使用服务器端脚本检查文件类型、大小和可能的恶意内容。 3. **用户体验**： - 提供清晰的上传进度和错误反馈。 - 如果可能，允许用户暂停、恢复或取消上传。 4. **代码复用和可维护性**： - 考虑使用现有的库或框架来处理文件上传和进度监控，如Dropzone.js、Fine Uploader等。 5. **服务器性能**： - 监控服务器资源使用情况，确保在高负载下仍能稳定处理文件上传。 6. **跨浏览器兼容性**： - 确保你的解决方案在不同浏览器上都能正常工作，特别是移动浏览器。 ### 四、结合码小课资源 在“码小课”网站上，你可以找到更多关于PHP文件上传和AJAX交互的教程和示例代码。通过深入学习和实践这些资源，你可以进一步提升你的Web开发技能，并优化你的多文件上传进度监控解决方案。同时，参与社区讨论和分享你的经验也是提升技术水平的好方法。