HTML5 FileReader分段上传：避免大文件导致的Ajax问题

本文档主要介绍了如何利用HTML5的FileReader API和Ajax技术实现分段读取大文件并将其上传至服务器。由于文件过大可能导致连续的Ajax请求对服务器造成压力，特别是对于像Google浏览器这样的环境，建议文件大小控制在三四百兆以下，以防止后台崩溃和InputStream数据获取失败。 首先，用户通过一个`<input type="file">`元素选择文件，文件被选中后，JavaScript代码获取文件对象并通过FileReader创建一个新的实例。`FileReader`对象的`onload`事件会在每一段数据读取成功时触发，用于处理读取结果。 代码中定义了一个名为`readBlob`的函数，它接收当前已加载的数据量（`cuLoaded`）作为参数。每次`onload`事件触发时，会将读取到的数据（`e.loaded`）累加到`cuLoaded`，然后调用`uploadFile`函数上传这部分数据。这个函数的第二个参数是当前已上传的数据量，第三个参数是一个回调函数，用于更新进度并在所有数据上传完毕后打印总耗时。 如果文件还有未读取的部分（即`cuLoaded`小于`total`），函数会继续调用`readBlob`以读取下一段数据；否则，计算上传整个文件的总耗时，并停止进一步的读取操作。 值得注意的是，处理大文件时可能会遇到`readAsArrayBuffer`或`readAsBinaryString`方法在读取某些类型的文件（如exe）时抛出异常的情况，这可能与浏览器的安全限制有关。在这种情况下，开发者需要考虑其他策略，例如使用`FileSaver.js`库将大文件转化为可下载的格式，或者采用分块上传的方式，确保文件上传的稳定性和效率。 这篇文章提供了一种实用的方法，帮助开发者处理大文件上传，通过合理的分段策略避免一次性加载过大文件带来的性能问题。同时，也提醒开发者注意不同浏览器之间的差异和安全限制。