Cách xác thực trong HTML5 để chỉ cho phép trong 'loại tệp đầu vào = "tệp"' JPG, GIF hoặc PNG?

Question

thể trùng lặp:
Limit file format when using <input type=“file”>?

tôi cần phải sử dụng thuộc tính HTML5 pattern để chỉ cho phép định dạng JPG, GIF và PNG trong một phần tử <input type="file">.

Tôi hiện đang có mô hình này, nhưng nó không làm việc:

<input type="file" class="input-file" id="tbinstUploadFile0" name="tbinstUploadFile0" placeholder="Please insert an image file..." pattern="([^\s]+(\.(?i)(jpg|png|gif|bmp))$)"> 

mẫu regex này không tương thích với HTML5? Làm cách nào để thử nghiệm các mẫu regex HTML5 hợp lệ?

Best Regards,

Answer 1

Hãy thử một cái gì đó giống như

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" /> 

Bấm here for the latest browser compatibility table

sống bản demo here

Để chọn chỉ các file hình ảnh, bạn có thể sử dụng accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" /> 

sống bản demo here

Chỉ gif, jpg và png sẽ được hiển thị, màn hình lấy từ phiên bản Chrome 44