使用JS实现单个文件上传

"JavaScript实现单个文件上传的代码片段" 在JavaScript中，上传文件是一项常见的功能，特别是对于Web应用来说。这段代码提供了一个简单的单个文件上传的实现方式，主要使用了Ajax技术，允许用户在不刷新页面的情况下上传文件。下面我们将详细解释其中的关键知识点。 1. **XMLHttpRequest对象**： - `var xml_http` 是创建的一个XMLHttpRequest对象，它是异步处理HTTP请求的核心。在`BeginSend`函数中，通过这个对象向服务器发送文件数据。 2. **文件分块上传**： - `blockSize = 1024 * 128` 定义了每次发送的文件块大小，这里是128KB。这种分块上传的方式可以处理大文件，避免一次性加载整个文件到内存中。 3. **进度跟踪**： - `SendBlockCount` 和 `SendCount` 用于追踪已发送的文件块数量和总块数，以便更新进度条。 - `lastSendTime` 用于计算速度，通过比较两次发送的时间差来得到。 - `document.getElementById("speed").innerHTML` 和 `document.getElementById("perentBar").style.width` 更新显示上传的速度和进度百分比。 4. **限制文件大小**： - `maxFileLimit = 1024 * 1024 * 50` 设置了最大可上传文件的大小，这里是50MB。如果文件超过这个限制，可能需要进行错误处理。 5. **文件名显示**： - `_filename` 存储选中的文件名，`document.getElementById("filename").innerHTML` 更新显示的文件名。 6. **用户界面控制**： - `document.getElementById("bar").style.display="block"` 和其他类似语句控制了上传过程中的UI元素显示，如进度条、速度信息等。 7. **文件上传函数**： - `SendFile()` 函数是实际执行文件上传的函数，它包含了上传逻辑，如读取文件、分割文件块、发送请求等。这部分代码没有完全给出，但通常会包含循环遍历文件块并调用`xml_http.send()`来发送每个块。 8. **异常处理**： - `breaked=false;` 和相关的检查，用于处理上传过程中可能出现的中断情况。 9. **事件监听**： - 虽然未直接展示，但XMLHttpRequest对象通常需要设置事件监听器，如`onreadystatechange`和`onerror`，以便在请求完成或出错时进行相应的操作。 10. **参考链接**： - 提供的链接`http://www.CrazyCoder.cn/Javascript/Article8329.html`可能包含更完整的代码示例和详细解释。 请注意，实际的文件上传实现还需要考虑浏览器兼容性、安全性（如防止跨站脚本攻击XSS和跨站请求伪造CSRF）以及错误处理等问题。在实际项目中，可能需要使用库或框架如jQuery或Fetch API来简化这个过程。