GWT - 不使用 FileUpload 对话框将文件上传到服务器

Question

我需要从用 GWT 编写的 Web 应用程序将文件上传到服务器。复杂的部分是无法显示 FileUpload 对话框（由于 TabPanel 上的空间紧缩问题）。所以点击一个按钮，我需要：

• 直接打开文件选择，无需使用包含要单击的 UploadItem 的附加表单来打扰用户
• 选择文件后立即开始上传

我在 GWT 中编写了以下代码，以在单击按钮时打开文件选择对话框：

final FileUpload upload = new FileUpload(); 
    
upload.setVisible(false);
upload.setName("uploadFormElement"); 
panel.add(upload);
    
panel.add(new Button("Select File", new ClickListener() { 
    public void onClick(Widget pSender) { 
         jsClickUpload( upload.getElement() );
         MessageBox.showMessage("selected filename: " + upload.getFilename());
    } 
}));
    
native void jsClickUpload(Element pElement) /*-{ pElement.click(); }-*/;

虽然这确实会在单击按钮时打开文件选择对话框，但同时也会显示文件名为空值的消息框。

所以我需要的是只有在选择文件后，才会显示消息框。我怎样才能做到这一点？另外，在此之后如何将实际文件上传到服务器（M

Answer 1

这是一个工作示例：

public void onModuleLoad() {
    final FileUpload upload = new FileUpload();
 
    upload.setVisible(false);
    upload.setName("uploadFormElement");
    RootPanel.get().add(upload);

    Button b = new Button("Select File");
    b.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
            jsClickUpload(upload.getElement());
        }
    });
    
    upload.addChangeHandler(new ChangeHandler() {
       @Override
        public void onChange(ChangeEvent event) {
            Window.alert(upload.getFilename());
        }
    });
    
    RootPanel.get().add(b);
}

native void jsClickUpload(Element pElement) /*-{
    pElement.click();
}-*/;

要上传它，您需要一个接收上传的 Servlet。我使用这个额外的库：http://code.google.com/p/gwtupload/ 您可以在他们的网站上找到所需的所有代码。