การใช้งานการอัปโหลดไฟล์ภายใต้ html นั้นค่อนข้างง่าย แต่ฉันเพิ่งสังเกตเห็นว่ามีแอตทริบิวต์ 'ยอมรับ' ที่สามารถเพิ่มลงใน<input type="file" ...>แท็กได้

แอททริบิวนี้มีประโยชน์ในการ จำกัด การอัพโหลดไฟล์ไปยังภาพ ฯลฯ หรือไม่? วิธีที่ดีที่สุดที่จะใช้มันคืออะไร?

หรือมีวิธี จำกัด ประเภทไฟล์โดยเฉพาะอย่างยิ่งในกล่องโต้ตอบไฟล์สำหรับแท็กอินพุตไฟล์ html หรือไม่

acceptแอตทริบิวต์จะเป็นประโยชน์อย่างไม่น่าเชื่อ inputมันเป็นคำใบ้เบราว์เซอร์จะแสดงเฉพาะไฟล์ที่ได้รับอนุญาตสำหรับในปัจจุบัน แม้ว่าโดยทั่วไปผู้ใช้จะสามารถเขียนทับได้ แต่จะช่วย จำกัด ผลการค้นหาให้ผู้ใช้เป็นค่าเริ่มต้นดังนั้นพวกเขาจึงสามารถค้นหาสิ่งที่ต้องการได้โดยไม่ต้องคัดแยกไฟล์เป็นร้อย ๆ ชนิด

การใช้

หมายเหตุ:ตัวอย่างเหล่านี้เขียนขึ้นตามข้อมูลจำเพาะปัจจุบันและอาจไม่สามารถใช้งานได้จริงในเบราว์เซอร์ (หรือใด ๆ ) ทั้งหมด ข้อกำหนดอาจมีการเปลี่ยนแปลงในอนาคตซึ่งอาจทำลายตัวอย่างเหล่านี้

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>

จากข้อกำหนดของ HTML ( แหล่งที่มา )

acceptแอตทริบิวต์อาจจะระบุเพื่อให้ตัวแทนผู้ใช้กับคำใบ้ของสิ่งที่ประเภทไฟล์ที่จะได้รับการยอมรับ

หากระบุไว้แอตทริบิวต์จะต้องประกอบด้วย ชุดของโทเค็นที่คั่นด้วยเครื่องหมายจุลภาคแต่ละรายการจะต้อง ตรงกับตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ASCIIสำหรับหนึ่งในรายการต่อไปนี้:

สตริง audio/*

• ระบุว่ายอมรับไฟล์เสียง

สตริง video/*

• ระบุว่าไฟล์วิดีโอได้รับการยอมรับ

สตริง image/*

• ระบุว่ายอมรับไฟล์รูปภาพ

ชนิดไมม์ที่ถูกต้องกับไม่มีพารามิเตอร์

• ระบุว่ายอมรับไฟล์ประเภทที่ระบุ

สตริงที่มีอักขระตัวแรกคืออักขระ U + 002E FULL STOP (.)

• ระบุว่ายอมรับไฟล์ที่มีนามสกุลไฟล์ที่ระบุ

ใช่มันมีประโยชน์อย่างมากในเบราว์เซอร์ที่สนับสนุน แต่ "การ จำกัด " เป็นความสะดวกสบายสำหรับผู้ใช้ (ดังนั้นพวกเขาจึงไม่ถูกครอบงำด้วยไฟล์ที่ไม่เกี่ยวข้อง) แทนที่จะเป็นวิธีที่จะป้องกันไม่ให้อัปโหลดสิ่งที่คุณไม่ต้องการ อัปโหลด

รองรับ

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

นี่คือรายการประเภทเนื้อหาที่คุณสามารถใช้กับมันตามด้วยนามสกุลไฟล์ที่เกี่ยวข้อง (แต่แน่นอนว่าคุณสามารถใช้นามสกุลไฟล์ใดก็ได้):

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

ในปี 2558 วิธีเดียวที่ฉันพบว่าทำให้มันทำงานได้ทั้งChromeและFirefoxคือการใส่ส่วนขยายที่เป็นไปได้ทั้งหมดที่คุณต้องการให้การสนับสนุนรวมถึงตัวแปรต่างๆ:

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

ปัญหาเกี่ยวกับ Firefox : การใช้image/jpegmime type Firefox จะแสดงเฉพาะ.jpgไฟล์, แปลกมากราวกับว่าคนทั่วไป.jpegนั้นไม่เป็นไร ...

ไม่ว่าคุณจะทำอะไรให้ลองไฟล์ที่มีนามสกุลต่างกัน บางทีมันอาจจะขึ้นอยู่กับระบบปฏิบัติการ ... ฉันคิดว่าacceptมันไม่ตรงตามตัวพิมพ์ใหญ่ - เล็ก แต่อาจไม่ได้ในเบราว์เซอร์ทุกตัว

นี่คือเอกสาร MDN เกี่ยวกับการยอมรับ :

ยอมรับหากค่าของประเภทแอตทริบิวต์เป็นไฟล์แล้วแอตทริบิวต์นี้จะระบุประเภทของไฟล์ที่เซิร์ฟเวอร์ยอมรับมิฉะนั้นจะถูกละเว้น ค่าจะต้องเป็นรายการที่คั่นด้วยเครื่องหมายจุลภาคของตัวระบุประเภทเนื้อหาที่ไม่ซ้ำกัน:

    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

แอ็ตทริบิวต์ยอมรับถูกนำมาใช้ในRFC 1867ซึ่งมีจุดประสงค์เพื่อเปิดใช้งานการกรองประเภทไฟล์ตามประเภท MIME สำหรับการควบคุมการเลือกไฟล์ แต่ในปี 2551 เบราว์เซอร์ส่วนใหญ่ไม่ได้ใช้ประโยชน์จากคุณลักษณะนี้ การใช้การเขียนสคริปต์ฝั่งไคลเอ็นต์คุณสามารถจัดเรียงการตรวจสอบตามส่วนขยายสำหรับการส่งข้อมูลประเภทที่ถูกต้อง (ส่วนขยาย)

การแก้ปัญหาอื่น ๆ สำหรับการอัปโหลดไฟล์ขั้นสูงต้องภาพยนตร์ Flash เช่นSWFUploadหรือจาวาเหมือนJUpload

Chrome รองรับ มันไม่ควรที่จะใช้สำหรับการตรวจสอบ แต่สำหรับประเภทบอกใบ้ระบบปฏิบัติการ หากคุณมีaccept="image/jpeg"แอตทริบิวต์ในไฟล์ที่อัปโหลดระบบปฏิบัติการจะแสดงเฉพาะไฟล์ประเภทที่แนะนำเท่านั้น

ไม่กี่ปีที่ผ่านมาและอย่างน้อย Chrome ก็ใช้ประโยชน์จากคุณลักษณะนี้ คุณลักษณะนี้มีประโยชน์มากจากจุดยืนการใช้งานเนื่องจากจะกรองไฟล์ที่ไม่จำเป็นออกไปสำหรับผู้ใช้ทำให้ประสบการณ์ของพวกเขาราบรื่นยิ่งขึ้น อย่างไรก็ตามผู้ใช้ยังคงสามารถเลือก "ไฟล์ทั้งหมด" จากประเภท (หรือข้ามตัวกรอง) ดังนั้นคุณควรตรวจสอบไฟล์ที่ใช้งานอยู่ หากคุณกำลังใช้งานบนเซิร์ฟเวอร์ให้ตรวจสอบก่อนใช้งาน ผู้ใช้สามารถข้ามสคริปต์ฝั่งไคลเอ็นต์ได้ตลอดเวลา

หากเบราว์เซอร์ใช้คุณสมบัตินี้มันเป็นเพียงความช่วยเหลือสำหรับผู้ใช้ดังนั้นเขาจะไม่อัปโหลดไฟล์หลายเมกะไบต์เพียงเพื่อดูว่าเซิร์ฟเวอร์ปฏิเสธ ...
เช่นเดียวกับ<input type="hidden" name="MAX_FILE_SIZE" value="100000">แท็ก: หากเบราว์เซอร์ใช้ มันจะไม่ส่งไฟล์ แต่เกิดข้อผิดพลาดส่งผลให้เกิดข้อผิดพลาดUPLOAD_ERR_FORM_SIZE(2) ใน PHP (ไม่แน่ใจว่ามันถูกจัดการในภาษาอื่น ๆ )
หมายเหตุเหล่านี้จะช่วยให้สำหรับผู้ใช้ แน่นอนว่าเซิร์ฟเวอร์จะต้องตรวจสอบประเภทและขนาดของไฟล์ที่อยู่ด้านบนเสมอ: มันง่ายที่จะยุ่งเกี่ยวกับค่าเหล่านี้ที่ฝั่งไคลเอ็นต์

ย้อนกลับไปในปี 2008 นี้ไม่สำคัญเพราะขาดระบบปฏิบัติการมือถือ แต่ตอนนี้สิ่งที่สำคัญมาก

เมื่อคุณตั้งค่าประเภท mime ที่ยอมรับได้แล้วตัวอย่างเช่นผู้ใช้ Android จะได้รับกล่องโต้ตอบระบบพร้อมแอปที่สามารถให้เนื้อหาของ mime ที่อินพุตไฟล์ยอมรับได้สิ่งที่ดีมากเพราะการสำรวจผ่านไฟล์ในไฟล์ explorer บนอุปกรณ์มือถือนั้นช้าและเครียด .

สิ่งสำคัญอย่างหนึ่งคือเบราว์เซอร์มือถือบางรุ่น (ขึ้นอยู่กับรุ่น Android ของ Chrome 36 และ Chrome Beta 37) ไม่รองรับการกรองแอปผ่านส่วนขยายและประเภท mime หลายประเภท