如何在<p:fileUpload mode ="simple">中验证文件大小和类型？

Question

在PrimeFaces 3.4的<p:fileUpload>属性,sizeLimit并allowTypes不会在以下情况下工作mode="simple".如何验证文件大小和允许的类型？

Answer 1

所述mode="simple"产生一个纯HTML5 <input type="file">代替使用jQuery/AJAX文件上传,所以在客户端设备是有限的.

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

例如

<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类型为<mime-mapping>中web.xml;容器本身的一个有一堆的默认的).

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