Elemento input[type=“file”]

Quando o seu usuários precisar fazer upload e alguma coisa no seu sistema, é a ele que você recorre.

 O básico

O elemento é bem simples:

<input type="file">

Mas se você quiser o mínimo de acessibilidade vai precisar adicionar mais um pouco de html:

<form method="post" action="upload.php" formenctype="multipart/form-data">
    <label for="upload">Upload your picture:</label>
    <input type="file" name="upload" id="upload">
</form>

Como o input color e outros tipos de inputs do HTML5, o estilo desse input é definido pelo browser.

 Limitações

Você pode limitar as opções do usuário setando diferentes MIME type no atributo accept, você também pode usar o * para permitir arquivos de um tipo em particular.

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

IOS suporta o * mas não suporta arquivos específicos como por exemplo image/png.

Tudo que não for um arquivo do tipo imagem vai ser ignorado ou nem aparecera quando o dialog para escolher os arquivos abrir.

Você também pode aceitar múltiplos arquivos utilizando o attributo booleano multiple.

<input type="file" multiple accept="image/*" name="upload" id="upload">

 Customização

Por padrão o elemento não é naaada customizável, mas como tudo nessa vida existe tem um workaround:

Sem javascript. Eu prefiro assim:

O @mdo da um exemplo aqui

Com javascript:

http://codepen.io/dudleystorey/pen/KdybXW

 
2
Kudos
 
2
Kudos

Now read this

Material Design, Part 1 - O começo.

Vou começar uma série de posts sobre Material Design, onde eu pretendo abordar desde a história que motivou a criação, até os detalhes dessa linguagem visual. Esse primeiro post é uma breve história do que levou a criação do Material,... Continue →