使用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>

如果您在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 (并dropzone.js按照如何在Facelets模板中引用CSS/JS /图像资源中的说明在JSF项目中安装文件？),那么我们应该最终在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需要考虑三件事:

1. Dropzone 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相位按如何在valueChangeListener方法得到更新模型值？

你的下一个问题应该是"我该如何保存？" .在这种情况下,继续这里:

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