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

Como organizamos o código front-end na CODELAND

Codeland? A Codeland é uma empresa de desenvolvimento web de Porto Alegre, conta com uma galera muito maneira e cheia de idéias, se um dia tiver de bobeira e quiser trocar uma idéia com a gente, sera muito bem bem vindo :D. Estou... Continue →