entrada de arquivo 'aceitar' atributo - é útil?
-
05-07-2019 - |
Pergunta
A implementação de um upload do arquivo em html é bastante simples, mas eu só notei que há um atributo 'aceitar' que pode ser adicionado à tag <input type="file" ...>
.
É este atributo útil como uma forma de limitar o upload de arquivos de imagens, etc? Qual é a melhor maneira de usá-lo?
Como alternativa, há uma maneira de tipos de arquivo limite, de preferência na janela de ficheiros, para uma marca de entrada arquivo html?
Solução
O atributo accept
é incrivelmente útil. É uma dica para os navegadores para apenas os arquivos mostram que são permitidos para o input
atual. Embora geralmente pode ser substituído por usuários, que ajuda a diminuir os resultados para os usuários por padrão, para que eles possam obter exatamente o que eles estão procurando, sem ter que peneirar uma centena de diferentes tipos de arquivo.
Uso
Nota: Estes exemplos foram escritos com base na especificação atual e não pode realmente trabalho em todas (ou nenhum) navegadores. A especificação também pode mudar no futuro, o que poderia quebrar estes exemplos.
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>
A partir da especificação HTML ( fonte )
O atributo
accept
podem ser especificados para proporcionar agentes de utilizador com um dica de quais tipos de arquivo serão aceitos.Se especificado, o atributo deve consistir de uma set de tokens separados por vírgulas , cada um dos quais tem de ser um case-insensitive ASCII corresponder para um dos seguintes:
A seqüência de
audio/*
- indica que arquivos de som são aceitos.
A seqüência de
video/*
- indica que arquivos de vídeo são aceitos.
A seqüência de
image/*
- indica que arquivos de imagem são aceitos.
A tipo de MIME válido sem parâmetros
- Indica que os arquivos do tipo especificado são aceitos.
Uma cadeia cujo primeiro personagem é um personagem U +002 Ponto Final (.)
- Indica que os arquivos com a extensão do arquivo especificado são aceitos.
Outras dicas
Sim, é extremamente útil em navegadores que suportam, mas o "limitar" é como uma conveniência para os usuários (para que eles não estão sobrecarregados com arquivos irrelevantes) e não como uma maneira de impedi-los de coisas upload você don' t quer que eles upload.
É apoiado em
- Chrome 16 +
- Safari 6 +
- Firefox 9 +
- IE 10 +
- Opera 11 +
Aqui está uma lista de tipos de conteúdo você pode uso com ele, seguido pelas extensões de arquivos correspondentes (embora, claro, você pode usar qualquer extensão de arquivo):
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
atributo Accept foi introduzido no RFC 1867 , com a intenção de permitir que arquivos do tipo filtragem baseada em MIME tipo para o controle de arquivo de seleção. Mas a partir de 2008, a maioria, se não todos, os navegadores não fazem uso desse atributo. Usando scripts do lado do cliente, você pode fazer uma espécie de validação de extensão com base, para enviar dados de tipo correto (extensão).
Outras soluções para upload de arquivos avançado requerem Flash filmes como SWFUpload ou Java Applets como JUpload .
Em 2015 a única maneira eu encontrei para fazer o trabalho para ambos Chrome e Firefox é colocar todas as extensões possíveis quiser apoiar , incluindo variantes:
accept=".jpeg, .jpg, .jpe, .jfif, .jif"
Problema com o FireFox : Usando o image/jpeg
MIME tipo de FireFox só irá mostrar os arquivos .jpg
, muito estranho como se o .jpeg
comum não era ok ...
Faça o que fizer, não deixe de experimentar com arquivos com várias extensões diferentes. Talvez ainda depende do OS ...
Eu accept
supõem é caso insensível, mas talvez não em todos os navegadores.
Aqui está a docs MDN sobre aceitar :
aceitar Se o valor do atributo tipo é arquivo, então este atributo indicará os tipos de arquivos que o servidor aceita, caso contrário, será ignorado. O valor deve ser uma lista separada por vírgulas de única tipo de conteúdo especificadores:
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
Ele é suportado pelo Chrome. Não é suposto ser usado para validação, mas para o tipo insinuando o OS. Se você tem um atributo accept="image/jpeg"
em um arquivo de carregar o sistema operacional só pode mostrar os arquivos do tipo sugerido.
Tem sido alguns anos, e Chrome, pelo menos, faz uso desse atributo. Esse atributo é muito útil do ponto de vista da usabilidade, uma vez que irá filtrar os arquivos desnecessários para o usuário, tornando a sua experiência mais suave. No entanto, o usuário ainda pode selecionar "todos os arquivos" do tipo (ou de outra forma de desvio do filtro), assim você deve sempre validar o arquivo de onde ele é realmente usado; Se você estiver usando-lo no servidor, validá-lo antes de usá-lo. O utilizador pode sempre ignorar qualquer scripting do lado do cliente.
Se o navegador usa esse atributo, é apenas como uma ajuda para o usuário, para que ele não vai fazer upload de um arquivo multi-megabyte apenas para vê-lo rejeitado pelo servidor ...
Mesmo para o tag <input type="hidden" name="MAX_FILE_SIZE" value="100000">
:. Se os usos do navegador isso, não irá enviar o arquivo, mas um erro resultando em UPLOAD_ERR_FORM_SIZE
erro (2) em PHP (não sei como ele é tratado em outros idiomas)
Note que esses são ajuda para o usuário . Claro, o servidor deve verificar sempre o tipo eo tamanho do arquivo no seu final:. É fácil de mexer com esses valores no lado do cliente
Em 2008 isso não era importante por causa da falta de OS'es móveis, mas coisa agora bastante importante.
Quando você definir tipos MIME aceita, então em, por exemplo, usuário Android é dada de diálogo sistema com aplicativos que podem fornecer-lhe o conteúdo do mime que entrada de arquivo aceita, o que é ótimo, porque navegar através de arquivos no explorador de arquivos em dispositivos móveis é lento e muitas vezes estressante.
Uma coisa importante é que alguns navegadores móveis (com base na versão Android do Chrome 36 e Chrome Beta 37) não suporta aplicativo de filtragem sobre extensão (s) e vários tipos de mímica.