Question

我想知道如何使用dropzone.js和JSF上传文件。在文档（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">元素！

现在，如果按照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需要考虑三件事：

Dropzone paramName选项必须设置为生成的name元素的<input type="file">，在上例中为uploadForm:file。
JSF输入文件和命令按钮组件必须包含在具有Dropzone特定class="fallback"的元素中才能被隐藏（并为JavaScript / Ajax缺陷客户端提供后备）。不删除它们，否则JSF将拒绝处理上传的文件，因为它需要根据组件树执行其工作。
save()方法由setter直接调用。这有点可疑，但由于Dropzone没有提供直接触发支持bean操作方法的机会，因此这是最简单的解决方法。另一种解决方法是在valueChangeListener上附加<h:inputFile>，并根据How to get updated model values in a valueChangeListener method?

INVOKE_APPLICATION

你的下一个问题应该是“我该如何保存？”。在这种情况下，请继续：

使用dropzone和JSF

1 个答案: