Cách xác thực kích thước và loại tệp trong <p: fileUpload mode = "simple">?

Question

Trong PrimeFaces 3.4, các thuộc tính <p:fileUpload>sizeLimit và allowTypes không hoạt động trong trường hợp mode="simple". Làm cách nào để xác thực kích thước tệp và các loại cho phép?

Answer 1

mode="simple" tạo đồng bằng HTML5 <input type="file"> thay vì sử dụng tải lên tệp jQuery/Ajax, do đó các cơ sở phía máy khách bị giới hạn.

Nếu trình duyệt web hỗ trợ HTML5 File API mới, thì bạn chỉ có thể sử dụng nó. Nó thêm hỗ trợ cho thuộc tính mới accept trên <input type="file"> và cho phép JavaScript có quyền truy cập vào các thuộc tính tệp cụ thể như File#size.

Ví dụ:

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

với điều này JS (sử dụng jQuery từ 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. 
    } 
}); 

Nếu không, đặt cược tốt nhất của bạn thực sự là việc chứng thực nó ở phía máy chủ. Bạn có thể sử dụng ExternalContext#getMimeType() để có loại mime dựa trên phần mở rộng tệp (bạn có thể quản lý tất cả các loại mime là <mime-mapping> trong web.xml; chính loại của bộ chứa có một số loại mặc định).

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