使用进度条上传文件或从Google Web Toolkit访问Html 5文件API？ [英] File upload with a progress bar, or accessing the Html 5 File Api from Google Web Toolkit?

问题描述

我正在寻找一种上传文件的方式，通过自定义的进度条，使用google web工具包。不寻找一个显示它自己的进度条的插件，我宁愿寻找一些将调用我的回调方法并通知它进度的东西，所以我可以显示我自己的进度条。

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

任何想法？

谢谢。

解决方案

这使得难以处理：

• GWT中没有 FormData 对象，因此您必须使用JSNI来获取一个。


• RequestBuilder 不支持发送 FormaData
• RequestBuilder 不支持上传或下载进度通知。


• FileUpload 不支持multiple属性。


• GWT中的Elemental包只适用于webkit浏览器，上次尝试使用文件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没有设置多重属性的方法
 //我们用gQuery代替
 .prop（multiple ，true）
 //我们使用gQuery事件机制
 .on（change，new Function（）{
 public void f（）{
 //使用gQuery utils创建一个FormData对象而不是JSNI 
 JavaScriptObject form = JsUtils.runJavascriptFunction（window，eval，new FormData（））; 
 //获取一个包含所选文件的数组
 JsArray< ; JavaScriptObject> files = $（fileUpload）.prop（files）; 
 //将每个文件添加到FormData 
中（int i = 0，l = files.length（）; i< ; l; i ++）{
 JsUtils.runJavascriptFunction（form，append，file-+ i，files.get（i））; 
} 
 
 //使用gQuery ajax代替RequestBuilder，因为它
 //支持FormData和进度
 Ajax.ajax（Ajax.createSettings（）
 .setUrl（url）
 .setData（（Properties）form））
 // gQuery ajax返回一个promise，使得代码更具声明性
 .progress（new Function（）{
 public void f（）{
 double total = arguments（0）; 
 double done = arguments（1）; 
 double percent = arguments（2）; 
 //这里你可以更新你的进度条
 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出错了：+ arguments（0））; 
} 
}）; 
} 
}）; 
  

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

它不使用HTML5 File api，而是基于服务器侦听器的ajax解决方案。但是，它会在未来版本中支持html5，并回退到旧浏览器的ajax机制。当gwtupload支持这个时，你不必修改代码中的任何东西。

I'm looking for a way to do file uploads, with a custom progress bar, with google web toolkit. Not looking for a plugin which shows its own progress bar, I'm rather looking for something which will call my callback method and notify it of progress, so I can show my own progress bar.

If that's not possible, then I'd like to know how to access the HTML5 File API so I can build my own file uploader widget.

Any ideas?

Thanks.

解决方案

There are many issues in GWT which makes difficult deal with this:

• There is no FormData object in GWT, so you have to use JSNI to get one.
• RequestBuilder does not support sending FormaData but only strings.
• RequestBuilder does not support upload or download progress notifications.
• FileUpload does not support the multiple attribute.
• The Elemental package in GWT only works with webkit browsers, and I had some issues last time I tried to use the File Api.

Fortunately, gwtquery 1.0.0 has a bunch of features which facilitates to solve the problem.

Here you have a working example (with very few lines of code), which works in all browsers supporting the HTML5 file 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));
          }
        });
    }
});

Another option is to use gwtupload, which supports any browser, and it comes with some nice widgets and progress bar, even you can plug your own progress and status widgets.

It does not use HTML5 File api yet but an ajax solution based on a server listener. It will though, support html5 in future versions, falling back to ajax mechanism for old browsers. When gwtupload supports this, you wont have to modify anything in your code.

这篇关于使用进度条上传文件或从Google Web Toolkit访问Html 5文件API？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！