使用进度条上传文件，还是从Google Web Toolkit访问Html 5 File Api

Question

我正在寻找一种使用自定义进度条和谷歌网络工具包进行文件上传的方法。我不是在寻找一个显示自己进度条的插件，而是在寻找一种可以调用我的回调方法并通知它进度的东西，这样我就可以显示自己的进度条。

如果这是不可能的，那么我想知道如何访问HTML5文件API，这样我就可以建立我自己的文件上传小部件。

有什么想法吗？

谢谢。

Answer 1

GWT中存在许多问题，这使得处理变得困难

• GWT中没有FormData对象，因此必须使用JSNI才能获得一个对象
• RequestBuilder不支持发送FormaData，只支持发送字符串
• RequestBuilder不支持上传或下载进度通知
• FileUpload不支持multiple属性
• GWT中的Elemental包只适用于webkit浏览器，上次我尝试使用File-Api时遇到了一些问题

幸运的是，gwtquery 1.0.0具有一系列功能，有助于解决问题。

这里有一个工作示例(代码行很少)，它适用于所有支持HTML5文件api的浏览器：

import static com.google.gwt.query.client.GQuery.*;
[...]
final FileUpload fileUpload = new FileUpload();
RootPanel.get().add(fileUpload);
$(fileUpload)
// FileUpload does not have a way to set the multiple attribute,
// we use gQuery instead
.prop("multiple", true)
// We use gQuery events mechanism
.on("change", new Function() {
public void f() {
// Use gQuery utils to create a FormData object instead of JSNI
JavaScriptObject form = JsUtils.runJavascriptFunction(window, "eval", "new FormData()");
// Get an array with the files selected
JsArray<JavaScriptObject> files =  $(fileUpload).prop("files");
// Add each file to the FormData
for (int i = 0, l = files.length(); i < l; i++) {
JsUtils.runJavascriptFunction(form, "append", "file-" + i, files.get(i));
}
// Use gQuery ajax instead of RequestBuilder because it 
// supports FormData and progress
Ajax.ajax(Ajax.createSettings()
.setUrl(url)
.setData((Properties)form))
// gQuery ajax returns a promise, making the code more declarative
.progress(new Function() {
public void f() {
double total = arguments(0);
double done = arguments(1);
double percent = arguments(2);
// Here you can update your progress bar
console.log("Uploaded " + done + "/" + total + " (" + percent + "%)");
}
})
.done(new Function() {
public void f() {
console.log("Files uploaded, server response is: " + arguments(0));
}
})
.fail(new Function() {
public void f() {
console.log("Something went wrong: " + arguments(0));
}
});
}
});

另一种选择是使用gwtupload，它支持任何浏览器，并配有一些不错的小部件和进度条，甚至你可以插入自己的进度和状态小部件。

它还没有使用HTML5Fileapi，而是基于服务器侦听器的ajax解决方案。不过，它将在未来的版本中支持html5，回到旧浏览器的ajax机制。当gwtupload支持这一点时，您不必修改代码中的任何内容。

Answer 2

所有构建块都在Elemental中，但可能无法在任何地方工作(Elemental"接近金属"，不支持检测或隐藏/处理浏览器错误/差异)。

或者您可以使用JSNI。