如何在Vaadin中使用一个上传按钮实现上传组件？

Question

我有以下类实现单个上传示例

@Override
public void init() {
    Window mainWindow = new Window("Singleuploadclick Application");
    Label label = new Label("Hello Vaadin user");

    mainWindow.addComponent(label);

    status = new Label("Please select a file to upload");
    upload = new Upload(null, receiver);

    upload.setImmediate(true);
    upload.setButtonCaption("Select file");

    upload.addListener(new Upload.StartedListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void uploadStarted(StartedEvent event) {
            upload.setVisible(false);
            status.setValue("Uploading file \"" + event.getFilename() + "\"");
        }
    });

    upload.addListener(new Upload.ProgressListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void updateProgress(long readBytes, long contentLength) {
        }

    });

    upload.addListener(new Upload.SucceededListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void uploadSucceeded(SucceededEvent event) {
            status.setValue("Uploading file \"" + event.getFilename() + "\" succeeded");
        }
    });

    upload.addListener(new Upload.FailedListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void uploadFailed(FailedEvent event) {
            status.setValue("Uploading interrupted");
        }
    });

    upload.addListener(new Upload.FinishedListener() {
        private static final long serialVersionUID = 1L;

        @Override
        public void uploadFinished(FinishedEvent event) {
            upload.setVisible(true);
            upload.setCaption("Select another file");
        }
    });

    mainWindow.addComponent(status);
    mainWindow.addComponent(upload);            
    setMainWindow(mainWindow);
}

运行应用程序时，我会看到上传组件的奇怪布局显示。

所以我需要上传组件只需一个上传按钮，这就是我使用的原因：upload.setImmediate（true）;

Answer 1

Button.setImmediate(true)用于在文件选择后开始上传（无需点击按钮）。但你仍然需要用CSS隐藏按钮。

引自Book of Vaadin 5.25 Upload：

  

您还可以使用主题中的.v-upload .v-button {display：none}隐藏上传按钮，使用自定义逻辑启动上传，并调用startUpload（）启动它。如果上传组件启用了setImmediate（true），则在选择文件后立即开始上传。

所以你需要将它添加到你的自定义主题：

.v-upload .v-button {
    display: none
}

Answer 2

以下css对我来说很好，感谢您的好处

.gwt-FileUpload {     显示：无 }