如何驗證文件大小並鍵入<p：fileUpload mode =「simple」>？

Question

在PrimeFaces 3.4中，屬性sizeLimit和allowTypes在mode="simple"的情況下不起作用。我如何驗證文件大小和允許的類型？

Answer 1

mode="simple"會生成一個普通的HTML5 <input type="file">而不是使用jQuery/Ajax文件上傳，所以客戶端設施是有限的。

如果網頁瀏覽器支持新的HTML5 File API，那麼您可以使用它。它增加了對<input type="file">上新的accept屬性的支持，並使JavaScript能夠訪問特定的文件屬性，例如File#size。

E.g.

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

這個JS（使用jQuery的PrimeFaces）：

$("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;容器自帶的默認類型爲<mime-mapping>）。

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