上传按钮 Vaadin 的接收者答案

【问题标题】：Receiver of Upload Button Vaadin上传按钮 Vaadin 的接收者
【发布时间】：2016-04-07 11:47:02
【问题描述】：

我正在尝试上传文件。它上传正常，但在上传时显示所有文件。我想仅限于选定的文件，例如 pdf,jpg 和 jpeg 文件。

当浏览器窗口打开时，我需要在上传文件时只有这些文件可见，其余文件应隐藏。这样用户就无法选择错误的文件。

谁能告诉我该怎么做？

我正在使用 Vaadin 7.5.1 和上传组件和一个接收器。

【问题讨论】：

不幸的是，webbrowser 没有这种可能性。这不是vaadin的限制。
@AndréSchild。真的吗？我相信所有主流浏览器都支持这一点。 IE 参加聚会有点晚了，但这已成为历史。见this answer
@peterh 哦...有趣，谢谢。

标签： file-upload vaadin vaadin7 receiver

【解决方案1】：

当前的Vaadin Upload component 不支持这个。有一个 enhancement request ，现在所有主要浏览器都支持此功能，因此 Vaadin Inc（或贡献者）很容易实现。

技术解释如下：Vaadin Upload 组件创建 HTML 如下：

<input type="file" name="foo">

但是您希望它产生的结果是这样的：

<input type="file" name="foo" accept=".pdf,.jpg,.jpeg">

以下是上述 HTML 在 Firefox 中的外观：

基本上accept 属性会告诉浏览器打开带有特定过滤器的文件选择对话框。

请注意，这是客户端的事情。它不会阻止精明的最终用户将与您的过滤器不匹配的内容上传到您的服务器。这适用于在客户端完成的任何类型的过滤，无论它是如何完成的。出于这个原因，您仍然需要一些服务器端验证。

【讨论】：

Html "accept" 不限制上传的文件类型，它只是在文件选择对话框中添加了软过滤器，因此用户可以将过滤器切换到所有文件并在这种情况下上传具有其他扩展名的文件。跨度>
是的。您仍然需要一些服务器端验证才能确定，但我相信 OP 要求客户端用户体验在文件选择窗口中具有（默认）过滤器。

【解决方案2】：

使用 JavaScript 小菜一碟 - 您只需检查放置按钮/浏览字段的页面的 HTML 源代码，即可找到生成的 html 元素的实际类名 - 这是 .csv 的示例，Vaadin 生成标题为“gwt-FileUpload”，因此您必须像这样设置它才能在单击“导入”按钮后仅查看 .csv 文件：

upload.setButtonCaption("Import");
JavaScript.getCurrent().execute("document.getElementsByClassName('gwt-FileUpload')[0].setAttribute('accept', '.csv')");

【讨论】：

【解决方案3】：

将此依赖项添加到您的 pom 文件中

<dependency>
   <groupId>com.wcs.wcslib</groupId>
   <artifactId>wcslib-vaadin-widget-multifileupload</artifactId>
   <version>1.10</version>
</dependency>

并使用以下代码上传文件，使用setAcceptFilter方法设置过滤器：

UploadStateWindow uploadStateWindow = new UploadStateWindow();
        uploadStateWindow.setOverallProgressVisible(true);
MultiFileUpload fileUpload = new MultiFileUpload(uploadFinishedHandler,
                uploadStateWindow, true);
fileUpload.setAcceptFilter(".png,.jpg");
fileUpload.setImmediate(true);

fileUpload.getSmartUpload().setUploadButtonCaptions("upload", "upload");

【讨论】：