浏览器对 POST 多部分请求的进度百分比。 GWT

Question

我正在寻找实现 POST 从 GWT 应用上传多部分文件的进度条的方法。

我已经了解开源 GWTUpload 库和 GWT AJAX-requests。

但是我无法对服务器端进行任何更改，只能对客户端进行更改。

我发现 Chrome 以某种方式处理了这样的进度 (http://oi58.tinypic.com/2w22ekm.jpg)。我怎样才能找回它？

Answer 1

由于 XMLHttpRequest 中尚未实现进度，因此也没有发送 FormData，我将使用 gwtquery Ajax。

我在上次 GWT.create 演示中做了一个 example：

final GQuery progress = $("<div>").css($$("height: 6px, width: 0%, background: #75bff4, position: absolute, top:0px")).appendTo(document);
GQuery fileUpload = $("<input type='file' multiple >").hide().appendTo(document);
fileUpload.trigger("click");
$(fileUpload).on("change", (e) -> {
  final JsArray<JavaScriptObject> files = fileUpload.prop("files");
  JavaScriptObject formData = JsUtils.jsni("eval", "new FormData()");
  for (int i = 0, l = files.length(); i < l; i++) {
    JsUtils.jsni(formData, "append", "file-" + i, files.get(i));
  }
  Settings settings = Ajax.createSettings().setUrl(uploadUrl).setData(formData).setWithCredentials(true);
  Ajax.ajax(settings)
     .done((o) -> {
       progress.remove();
       $("<img src='" + uploadUrl + "?show=file-0-0'>").css($$("position: absolute, top: 0")).appendTo(document);
     })
     .progress((a, b) -> {
       progress.animate("width:" + b + "%");
     });
  return true;
});

浏览器对 POST 多部分请求的进度百分比。 GWT

Progress percentage from browser on POST multipart request. GWT

post

gwt

upload

progress-bar

progress