将拖放区与 JSF 一起使用

Question

我想知道如何使用带有JSF的dropzone.js来上传文件。在文档(http://www.dropzonejs.com/#usage)中，它说使用dropzone就像使用：

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

但是我不知道如何在 JSF 中实现服务器端部分来获取文件并将其存储在磁盘中。

Answer 1

您似乎没有完全意识到JSF在这个问题的上下文中只是一个HTML代码生成器。JSF 提供了一个生成 HTML<input type="file">元素的<h:inputFile>组件。

自己试试：

<h:form id="uploadForm" enctype="multipart/form-data">
<h:inputFile id="file" value="#{bean.file}" />
<h:commandButton id="submit" value="submit" />
</h:form>

如果在 Web 浏览器中打开 JSF 页并右键单击并查看页面源代码，则应看到如下所示的内容：

<form id="uploadForm" name="uploadForm" method="post" action="/playground/test.xhtml" enctype="multipart/form-data">
<input type="hidden" name="uploadForm" value="uploadForm" />
<input id="uploadForm:file" type="file" name="uploadForm:file" />
<input type="submit" name="uploadForm:submit" value="submit" />
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="3646344859491704387:-5449990057208847169" autocomplete="off" />
</form>

看，有你的<input type="file">元素！

现在，如果我们根据其文档配置 Dropzone(并且您按照如何在 Facelet 模板中引用 CSS/JS/图像资源中的说明在 JSF 项目中安装dropzone.js文件？)，那么我们应该在 JSF 页面中以如下所示的内容结束：

<h:head>
...
<h:outputScript name="dropzone.js" />
<h:outputScript>Dropzone.options.uploadForm = { paramName: "uploadForm:file" };</h:outputScript>
</h:head>
<h:body>
<h:form id="uploadForm" enctype="multipart/form-data" styleClass="dropzone">
<div class="fallback">
<h:inputFile id="file" value="#{bean.file}" />
<h:commandButton id="submit" value="submit" />
</div>
</h:form>
</h:body>

豆子看起来像这样：

@Named
@RequestScoped
public class Bean {
private Part file;
public void save() throws IOException {
String fileName = file.getSubmittedFileName();
String contentType = file.getContentType();
long size = file.getSize();
InputStream content = file.getInputStream();
// ...
}
public Part getFile() {
return file;
}
public void setFile(Part file) throws IOException {
this.file = file;
save();
}
}

使用 JSF 需要考虑 3 件事：

1. DropzoneparamName选项必须精确设置为生成的<input type="file">元素的name，这在上面的示例中uploadForm:file。
2. JSF 输入文件和命令按钮组件必须包装在具有特定于 Dropzoneclass="fallback"的元素中才能隐藏(并为 JavaScript/Ajax 缺陷的客户端提供回退)。不要删除它们，否则 JSF 将拒绝处理上传的文件，因为它需要根据组件树执行其作业。
3. save()方法由资源库直接调用。这有点可疑，但由于 Dropzone 不提供直接触发后备 Bean 操作方法的机会，因此这是最简单的解决方法。另一种解决方法是在<h:inputFile>上附加一个valueChangeListener，并将事件排队到INVOKE_APPLICATION阶段，如如何在 valueChangeListener 方法中获取更新的模型值？

您的下一个问题可能是"我应该如何保存它？在这种情况下，请在此处继续：

• 如何在 JSF 中保存上传的文件
• 在 servlet 应用程序中保存上传文件的推荐方法