Việc thực hiện tải lên tệp dưới html khá đơn giản, nhưng tôi chỉ nhận thấy rằng có một thuộc tính 'chấp nhận' có thể được thêm vào <input type="file" ...>thẻ.

Là thuộc tính này hữu ích như một cách giới hạn tải lên tập tin vào hình ảnh, vv? Cách tốt nhất để sử dụng nó là gì?

Ngoài ra, có cách nào để giới hạn các loại tệp, tốt nhất là trong hộp thoại tệp cho thẻ nhập tệp html không?

Các acceptthuộc tính là vô cùng hữu ích. Đó là một gợi ý cho các trình duyệt để chỉ hiển thị các tệp được phép cho hiện tại input. Mặc dù người dùng thường có thể bị ghi đè, nhưng nó giúp thu hẹp kết quả cho người dùng theo mặc định, do đó họ có thể nhận được chính xác những gì họ đang tìm kiếm mà không phải sàng lọc hàng trăm loại tệp khác nhau.

Sử dụng

Lưu ý: Những ví dụ này được viết dựa trên đặc điểm kỹ thuật hiện tại và có thể không thực sự hoạt động trong tất cả (hoặc bất kỳ) trình duyệt nào. Đặc điểm kỹ thuật cũng có thể thay đổi trong tương lai, có thể phá vỡ các ví dụ này.

h1 { font-size: 1em; margin:1em 0; }
h1 ~ h1 { border-top: 1px solid #ccc; padding-top: 1em; }

<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>

Từ Đặc tả HTML ( nguồn )

Các acceptthuộc tính có thể được xác định để cung cấp đại lý người dùng với một chút những gì các loại tập tin sẽ được chấp nhận.

Nếu được chỉ định, thuộc tính phải bao gồm một tập hợp các mã thông báo được phân tách bằng dấu phẩy , mỗi mã phải là một đối sánh không phân biệt chữ hoa chữ thường của ASCII cho một trong các trường hợp sau:

Chuỗi audio/*

• Cho biết các tập tin âm thanh được chấp nhận.

Chuỗi video/*

• Cho biết các tập tin video được chấp nhận.

Chuỗi image/*

• Cho biết các tập tin hình ảnh được chấp nhận.

Một kiểu MIME hợp lệ không có tham số

• Cho biết các tệp thuộc loại đã chỉ định được chấp nhận.

Chuỗi có ký tự đầu tiên là ký tự U + 002E FULL STOP (.)

• Cho biết các tệp có phần mở rộng tệp được chỉ định được chấp nhận.

Đúng, nó cực kỳ hữu ích trong các trình duyệt hỗ trợ nó, nhưng "giới hạn" là sự tiện lợi cho người dùng (vì vậy chúng không bị quá tải với các tệp không liên quan) hơn là một cách để ngăn họ tải lên những thứ bạn không muốn tải lên.

Nó được hỗ trợ trong

• Chrome 16 +
• Safari 6 +
• Firefox 9 +
• IE 10 +
• Opera 11 +

Dưới đây là danh sách các loại nội dung bạn có thể sử dụng với nó, theo sau là các phần mở rộng tệp tương ứng (mặc dù tất nhiên bạn có thể sử dụng bất kỳ tiện ích mở rộng tệp nào):

application/envoy   evy
application/fractals    fif
application/futuresplash    spl
application/hta hta
application/internet-property-stream    acx
application/mac-binhex40    hqx
application/msword  doc
application/msword  dot
application/octet-stream    *
application/octet-stream    bin
application/octet-stream    class
application/octet-stream    dms
application/octet-stream    exe
application/octet-stream    lha
application/octet-stream    lzh
application/oda oda
application/olescript   axs
application/pdf pdf
application/pics-rules  prf
application/pkcs10  p10
application/pkix-crl    crl
application/postscript  ai
application/postscript  eps
application/postscript  ps
application/rtf rtf
application/set-payment-initiation  setpay
application/set-registration-initiation setreg
application/vnd.ms-excel    xla
application/vnd.ms-excel    xlc
application/vnd.ms-excel    xlm
application/vnd.ms-excel    xls
application/vnd.ms-excel    xlt
application/vnd.ms-excel    xlw
application/vnd.ms-outlook  msg
application/vnd.ms-pkicertstore sst
application/vnd.ms-pkiseccat    cat
application/vnd.ms-pkistl   stl
application/vnd.ms-powerpoint   pot
application/vnd.ms-powerpoint   pps
application/vnd.ms-powerpoint   ppt
application/vnd.ms-project  mpp
application/vnd.ms-works    wcm
application/vnd.ms-works    wdb
application/vnd.ms-works    wks
application/vnd.ms-works    wps
application/winhlp  hlp
application/x-bcpio bcpio
application/x-cdf   cdf
application/x-compress  z
application/x-compressed    tgz
application/x-cpio  cpio
application/x-csh   csh
application/x-director  dcr
application/x-director  dir
application/x-director  dxr
application/x-dvi   dvi
application/x-gtar  gtar
application/x-gzip  gz
application/x-hdf   hdf
application/x-internet-signup   ins
application/x-internet-signup   isp
application/x-iphone    iii
application/x-javascript    js
application/x-latex latex
application/x-msaccess  mdb
application/x-mscardfile    crd
application/x-msclip    clp
application/x-msdownload    dll
application/x-msmediaview   m13
application/x-msmediaview   m14
application/x-msmediaview   mvb
application/x-msmetafile    wmf
application/x-msmoney   mny
application/x-mspublisher   pub
application/x-msschedule    scd
application/x-msterminal    trm
application/x-mswrite   wri
application/x-netcdf    cdf
application/x-netcdf    nc
application/x-perfmon   pma
application/x-perfmon   pmc
application/x-perfmon   pml
application/x-perfmon   pmr
application/x-perfmon   pmw
application/x-pkcs12    p12
application/x-pkcs12    pfx
application/x-pkcs7-certificates    p7b
application/x-pkcs7-certificates    spc
application/x-pkcs7-certreqresp p7r
application/x-pkcs7-mime    p7c
application/x-pkcs7-mime    p7m
application/x-pkcs7-signature   p7s
application/x-sh    sh
application/x-shar  shar
application/x-shockwave-flash   swf
application/x-stuffit   sit
application/x-sv4cpio   sv4cpio
application/x-sv4crc    sv4crc
application/x-tar   tar
application/x-tcl   tcl
application/x-tex   tex
application/x-texinfo   texi
application/x-texinfo   texinfo
application/x-troff roff
application/x-troff t
application/x-troff tr
application/x-troff-man man
application/x-troff-me  me
application/x-troff-ms  ms
application/x-ustar ustar
application/x-wais-source   src
application/x-x509-ca-cert  cer
application/x-x509-ca-cert  crt
application/x-x509-ca-cert  der
application/ynd.ms-pkipko   pko
application/zip zip
audio/basic au
audio/basic snd
audio/mid   mid
audio/mid   rmi
audio/mpeg  mp3
audio/x-aiff    aif
audio/x-aiff    aifc
audio/x-aiff    aiff
audio/x-mpegurl m3u
audio/x-pn-realaudio    ra
audio/x-pn-realaudio    ram
audio/x-wav wav
image/bmp   bmp
image/cis-cod   cod
image/gif   gif
image/ief   ief
image/jpeg  jpe
image/jpeg  jpeg
image/jpeg  jpg
image/pipeg jfif
image/svg+xml   svg
image/tiff  tif
image/tiff  tiff
image/x-cmu-raster  ras
image/x-cmx cmx
image/x-icon    ico
image/x-portable-anymap pnm
image/x-portable-bitmap pbm
image/x-portable-graymap    pgm
image/x-portable-pixmap ppm
image/x-rgb rgb
image/x-xbitmap xbm
image/x-xpixmap xpm
image/x-xwindowdump xwd
message/rfc822  mht
message/rfc822  mhtml
message/rfc822  nws
text/css    css
text/h323   323
text/html   htm
text/html   html
text/html   stm
text/iuls   uls
text/plain  bas
text/plain  c
text/plain  h
text/plain  txt
text/richtext   rtx
text/scriptlet  sct
text/tab-separated-values   tsv
text/webviewhtml    htt
text/x-component    htc
text/x-setext   etx
text/x-vcard    vcf
video/mpeg  mp2
video/mpeg  mpa
video/mpeg  mpe
video/mpeg  mpeg
video/mpeg  mpg
video/mpeg  mpv2
video/quicktime mov
video/quicktime qt
video/x-la-asf  lsf
video/x-la-asf  lsx
video/x-ms-asf  asf
video/x-ms-asf  asr
video/x-ms-asf  asx
video/x-msvideo avi
video/x-sgi-movie   movie
x-world/x-vrml  flr
x-world/x-vrml  vrml
x-world/x-vrml  wrl
x-world/x-vrml  wrz
x-world/x-vrml  xaf
x-world/x-vrml  xof

Vào năm 2015 , cách duy nhất tôi tìm thấy để làm cho nó hoạt động cho cả Chrome và Firefox là đặt tất cả các tiện ích mở rộng có thể bạn muốn hỗ trợ, bao gồm các biến thể:

accept=".jpeg, .jpg, .jpe, .jfif, .jif"

Sự cố với Firefox : Sử dụng image/jpegloại mime Firefox sẽ chỉ hiển thị .jpgcác tệp, rất lạ như thể thông thường .jpegkhông ổn ...

Dù bạn làm gì, hãy chắc chắn thử với các tệp có nhiều phần mở rộng khác nhau. Có lẽ nó còn phụ thuộc vào HĐH ... Tôi cho acceptlà không phân biệt chữ hoa chữ thường, nhưng có lẽ không phải trong mọi trình duyệt.

Đây là tài liệu MDN về chấp nhận :

chấp nhận Nếu giá trị của thuộc tính type là tệp, thì thuộc tính này sẽ chỉ ra các loại tệp mà máy chủ chấp nhận, nếu không nó sẽ bị bỏ qua. Giá trị phải là danh sách các chỉ định loại nội dung duy nhất được phân tách bằng dấu phẩy:

    A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).
    A valid MIME type with no extensions.
    audio/* representing sound files. HTML5
    video/* representing video files. HTML5
    image/* representing image files. HTML5

Thuộc tính Chấp nhận được giới thiệu trong RFC 1867 , dự định cho phép lọc loại tệp dựa trên loại MIME cho điều khiển chọn tệp. Nhưng kể từ năm 2008, hầu hết, nếu không phải tất cả, các trình duyệt không sử dụng thuộc tính này. Sử dụng kịch bản phía máy khách, bạn có thể tạo một loại xác thực dựa trên tiện ích mở rộng, để gửi dữ liệu đúng loại (tiện ích mở rộng).

Các giải pháp khác để tải lên tệp nâng cao yêu cầu phim Flash như SWFUpload hoặc Java Applet như JUpload .

Nó được Chrome hỗ trợ. Nó không được sử dụng để xác nhận, nhưng để đánh dấu hệ điều hành. Nếu bạn có một accept="image/jpeg"thuộc tính trong một tệp tải lên, HĐH chỉ có thể hiển thị các tệp thuộc loại được đề xuất.

Đã một vài năm và Chrome ít nhất sử dụng thuộc tính này. Thuộc tính này rất hữu ích từ quan điểm khả năng sử dụng vì nó sẽ lọc ra các tệp không cần thiết cho người dùng, giúp trải nghiệm của họ mượt mà hơn. Tuy nhiên, người dùng vẫn có thể chọn "tất cả các tệp" từ loại (hoặc nếu không bỏ qua bộ lọc), do đó bạn phải luôn xác thực tệp nơi thực sự được sử dụng; Nếu bạn đang sử dụng nó trên máy chủ, hãy xác thực nó ở đó trước khi sử dụng nó. Người dùng luôn có thể bỏ qua mọi kịch bản phía máy khách.

Nếu trình duyệt sử dụng thuộc tính này, nó chỉ là trợ giúp cho người dùng, vì vậy anh ta sẽ không tải lên tệp nhiều megabyte chỉ để xem nó bị máy chủ từ chối ...
Tương tự đối với <input type="hidden" name="MAX_FILE_SIZE" value="100000">thẻ: nếu trình duyệt sử dụng nó, nó sẽ không gửi tệp nhưng một lỗi dẫn đến UPLOAD_ERR_FORM_SIZE(2) lỗi trong PHP (không chắc cách xử lý nó trong các ngôn ngữ khác).
Lưu ý đây là những trợ giúp cho người dùng . Tất nhiên, máy chủ phải luôn kiểm tra loại và kích thước của tệp ở cuối: dễ dàng giả mạo các giá trị này ở phía máy khách.

Trở lại năm 2008, điều này không quan trọng vì thiếu hệ điều hành di động nhưng bây giờ điều khá quan trọng.

Khi bạn đặt các loại mime được chấp nhận, ví dụ như người dùng Android được cung cấp hộp thoại hệ thống với các ứng dụng có thể cung cấp cho anh ta nội dung của mime mà đầu vào tệp chấp nhận, điều này thật tuyệt vì điều hướng qua các tệp trong trình duyệt tệp trên thiết bị di động rất chậm và thường căng thẳng .

Một điều quan trọng là một số trình duyệt di động (dựa trên phiên bản Android của Chrome 36 và Chrome Beta 37) không hỗ trợ lọc ứng dụng qua (các) tiện ích mở rộng và nhiều loại mime.