jsf - 将 dropzone 与 JSF 结合使用

Question

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

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

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

Answer 1

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

自己尝试一下:

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

如果您在网络浏览器中打开 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">元素!

现在，如果我们按照 its documentation 配置 Dropzone (并且您按照 How to reference CSS / JS / image resource in Facelets template? 中的说明在 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>

bean 看起来就像这样:

@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. 登陆区 paramName选项必须准确设置为 name生成的 <input type="file">元素，即 uploadForm:file在上面的例子中。
2. JSF 输入文件和命令按钮组件必须包装在具有 Dropzone 特定 class="fallback" 的元素中为了隐藏(并为 JavaScript/Ajax 缺陷的客户端提供后备)。不要删除它们，否则 JSF 将拒绝处理上传的文件，因为它需要基于组件树来执行其工作。
3. save()方法由 setter 直接调用。这有点可疑，但由于 Dropzone 不提供直接触发辅助 bean 操作方法的机会，因此这是最简单的解决方法。另一个解决方法是附加 valueChangeListener关于<h:inputFile>并将事件排队到 INVOKE_APPLICATION阶段按照 How to get updated model values in a valueChangeListener method?

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

• How to save uploaded file in JSF
• Recommended way to save uploaded files in a servlet application