giới hạn lựa chọn tải tệp lên các loại cụ thể

Question

Dù sao để hạn chế việc chọn loại tệp qua yếu tố <input type="file" />? Ví dụ: nếu tôi chỉ muốn tải lên các loại hình ảnh, tôi sẽ hạn chế các lựa chọn có thể có (hình ảnh/jpg, hình ảnh/gif, hình ảnh/png) và hộp thoại lựa chọn sẽ làm xám các tệp của các loại mime khác .

p.s. Tôi biết rằng tôi có thể làm điều này sau khi thực tế với API tệp bằng cách quét các thuộc tính .type. Tôi thực sự cố gắng để hạn chế này trước khi tay .. Tôi cũng biết tôi có thể làm điều này thông qua đèn flash, nhưng tôi không muốn có sử dụng đèn flash cho việc này.

Answer 1

Có thuộc tính html cho mục đích cụ thể này được gọi là accept nhưng có ít sự hỗ trợ trên các trình duyệt. Do việc xác thực bên máy chủ này được đề xuất thay thế.

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> 

Nếu bạn không có quyền truy cập vào chương trình phụ trợ, hãy xem giải pháp dựa trên flash như SWFUpload.

Xem thêm về vấn đề này ở đây: File input 'accept' attribute - is it useful?

Answer 2

Nó tốt hơn để cho phép người dùng chọn bất kỳ tập tin, và sau đó kiểm tra kiểu của nó - đây là tốt hơn được hỗ trợ bởi các trình duyệt:

var 
    file = (el[0].files ? el[0].files[0] : el[0].value || undefined), 
    supportedFormats = ['image/jpg','image/gif','image/png']; 

if (file && file.type) { 
    if (0 > supportedFormats.indexOf(file.type)) { 
     alert('unsupported format'); 
    } 
    else { 
     upload(); 
    } 
} 

Bạn cũng có thể kiểm tra cho kích thước tệp bằng thuộc tính file.size.