file-upload - ファイルのサイズとタイプを検証する方法?

Question

PrimeFaces 3.4 では、 の場合、<p:fileUpload>属性sizeLimitとallowTypesが機能しませんmode="simple"。ファイル サイズと許容されるタイプを検証するにはどうすればよいですか?

Answer 1

は、jQuery/Ajax ファイルのアップロードを使用する代わりにmode="simple"、プレーンな HTML5 を生成するため、クライアント側の機能が制限されます。<input type="file">

ウェブブラウザが新しいHTML5 FileAPIをサポートしている場合は、それを利用できます。accept新しい属性 onのサポートを追加し、<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コンテナ自体の MIME タイプにはデフォルトのタイプが多数あります)。

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