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

Question

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

我已经知道开源 GWTUpload 库和 GWT AJAX 请求。

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

我发现 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;
});