如何在<p:fileupload mode =“simple”>?</p:fileupload>中验证文件大小和类型

时间:2012-09-30 14:26:34

标签: file-upload jsf-2 primefaces

在PrimeFaces 3.4中,<p:fileUpload> sizeLimit属性allowTypesmode="simple"在{{1}}的情况下不起作用。如何验证文件大小和允许的类型?

1 个答案:

答案 0 :(得分:6)

mode="simple"生成纯HTML5 <input type="file">而不是使用jQuery / Ajax文件上传,因此客户端设施有限。

如果webbrowser支持新的HTML5 File API,那么您可以使用它。它增加了对accept上的新<input type="file">属性的支持,并使JavaScript能够访问特定文件属性,例如File#size

E.g。

<p:fileUpload mode="simple" styleClass="imagesOnlyMax10MB" />

使用这个JS(使用PrimeFaces的jQuery):

$("input[type=file].imagesOnlyMax10MB").attr("accept", "image/*").on("change", function() {
    var max = 10 * 1024 * 1024; // 10MB

    if (this.files && this.files[0].size > max) {
        alert("File too large."); // Do your thing to handle the error.
        this.value = null; // Clears the field.
    }
});

否则,您最好的选择是在服务器端验证它。你可以使用ExternalContext#getMimeType()来获取基于文件扩展名的mime类型(你可以在<mime-mapping>中管理所有mime类型为web.xml;容器自己的mime类型有一堆默认类型)。< / p>

if (!externalContext.getMimeType(filename).startsWith("image/")) {
    // Not an image.
}