Java servlet和Ajax上传文件进度条

Question

目前，我使用 XmlHttpRequest 使用 HTML5 功能将文件上传到服务器。

有进度条:

xhr.upload.addEventListener('progress', function(e) {
var done = e.position || e.loaded, total = e.totalSize || e.total;
console.log(done);
});

...一切正常，但它不考虑服务器处理文件。因此，即使文件尚未创建，它也会显示 100% 已上传。

文件接收器是Java servlet，只有返回后才能响应。因此，这里无法计算其响应剩余的百分比。

是否有解决办法？

Answer 1

如果服务器的处理需要很长时间，并且您想在处理过程中提供反馈，这里有一个解决方案的粗略轮廓。这需要一段时间才能实现，因此只有在处理速度很慢的情况下才真正值得这样做。

1. 修改您的 servlet 以异步方式完成工作，并向客户端返回 201 Accepted 响应。
2. 当服务器处理文件时，设置一个对象的进度，通常是用 Spring 注入(inject)的 ConcurrentHashMap(如果您正在使用该对象)。
3. 公开一个 API，用于查询任务的当前进度，而不会阻止任务完成。
4. 在您的 JavaScript 中，轮询此 API 直至任务完成，并显示进度。

如果需要，您可以在第 1 步的响应中返回跟踪 ID。