Upload de arquivos

11.1 Elemento <input type="file">

Aplicativos web muitas vezes precisam que os usuários façam upload de arquivos para o servidor. Isso pode ser útil para enviar documentos, imagens, vídeos e outros tipos de dados. HTML fornece o elemento <input type="file"> para criar interfaces de upload de arquivos. Abaixo, vamos ver em detalhe como usar esse elemento e seus atributos, como multiple e accept.

O elemento <input type="file"> cria um elemento de interface que permite aos usuários selecionar arquivos de seus dispositivos e fazer upload para o servidor. Este é um dos elementos chave do formulário em HTML, que permite integrar a funcionalidade de upload de arquivos em aplicativos web.

Atributos principais do elemento <input type="file">

1. type="file" — define que o elemento é destinado à seleção de arquivos.
2. name — define o nome do elemento, que será utilizado ao enviar dados do formulário para o servidor.
3. multiple — permite ao usuário selecionar vários arquivos ao mesmo tempo.
4. accept — especifica os tipos de arquivos que podem ser selecionados, usando tipos MIME ou extensões de arquivos.

Exemplos de uso do elemento <input type="file">

Exemplo simples

Exemplo mais simples de elemento para upload de arquivo sem atributos adicionais:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Escolha um arquivo:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Fazer upload</button>
      </form>
    
  

11.2 Atributo multiple

O elemento <input type="file"> suporta vários atributos que expandem sua funcionalidade. Vamos ver dois deles: multiple e accept.

O atributo multiple permite aos usuários selecionar múltiplos arquivos para upload. Quando este atributo é adicionado, os usuários podem escolher vários arquivos na janela de seleção de arquivos.

Exemplo de uso:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">Escolha os arquivos:</label>
        <input type="file" id="files" name="files" multiple>
        <button type="submit">Fazer upload</button>
      </form>
    
  

11.3 Atributo accept

O atributo accept restringe os tipos de arquivos que podem ser selecionados pelo usuário. Isso é útil para garantir que os usuários enviem apenas tipos de arquivos válidos (por exemplo, apenas imagens ou documentos).

Exemplo de uso:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Escolha uma imagem:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <button type="submit">Fazer upload</button>
      </form>
    
  

O atributo accept restringe os tipos de arquivos que podem ser selecionados. Isso pode ser feito por tipos MIME ou extensões de arquivos. No exemplo acima, os usuários podem escolher apenas arquivos de imagem.

Exemplos de valores do atributo accept

Restrição por tipo de arquivo:

• accept="image/*": qualquer imagem
• accept="video/*": qualquer arquivo de vídeo
• accept="audio/*": qualquer arquivo de áudio

Restrição por extensão de arquivo:

• accept=".jpg/.jpeg/.png": apenas imagens nos formatos JPEG e PNG
• accept=".pdf/.doc/.docx": apenas documentos PDF e Word

11.4 Manipulação de arquivos no lado do cliente

Às vezes é necessário fazer uma pré-processamento dos arquivos no lado do cliente antes de enviá-los para o servidor. Por exemplo, pode-se exibir uma pré-visualização das imagens ou verificar o tamanho do arquivo. Para isso, utiliza-se JavaScript.

Exemplo de pré-visualização de imagem:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Escolha uma imagem:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <div id="preview"></div>
        <button type="submit">Fazer upload</button>
      </form>
    
  

    
      document.getElementById('image').addEventListener('change', function(event) {
        const preview = document.getElementById('preview');
        preview.innerHTML = '';

        const files = event.target.files;

        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const reader = new FileReader();

          reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.maxWidth = '200px';
            preview.appendChild(img);
          }
          reader.readAsDataURL(file);
        }
      });
    
  

Explicação

• FileReader: usado para ler o conteúdo dos arquivos no lado do cliente
• reader.onload: evento que dispara quando o arquivo é completamente lido
• reader.readAsDataURL(file): método que lê o arquivo e o codifica como Data URL, permitindo sua exibição na tag <img>

1

Опрос

Elementos de formulários,  9 уровень,  5 лекция

недоступен

Elementos de formulários

Elementos de formulários

Открыть