JavaScript: upload de arquivo

Digamos que eu tenha esse elemento na página:

 

Isso criará um botão que permitirá que os usuários da página da Web selecionem um arquivo por meio de um diálogo “Abrir arquivo …” do sistema operacional no navegador.

Digamos que o usuário clique no botão, selecione um arquivo na checkbox de diálogo e clique no botão “Ok” para fechar a checkbox de diálogo.

O nome do arquivo selecionado agora está armazenado em:

 document.getElementById("image-file").value 

Agora, digamos que o servidor manipule POSTs de várias partes na URL “/ upload / image”.

Como faço para enviar o arquivo para “/ upload / image”?

Além disso, como ouço a notificação de que o arquivo terminou de ser carregado?

    A menos que você esteja tentando enviar o arquivo usando ajax, basta enviar o formulário para /upload/image .

     

    Se você quiser enviar a imagem em segundo plano (por exemplo, sem enviar o formulário inteiro), você pode usar ajax:

    • Upload de arquivo asynchronous (upload de arquivo AJAX) usando jsp e javascript
    • jQuery Ajax File Upload
    • Ajax usando o upload de arquivo

    Se você está, de fato, buscando uma forma de javascript puro para fazer upload de uma imagem, então o tutorial a seguir, de 2009, lhe dirá exatamente como fazer isso:

    http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html

    Eu me deparei com isso quando quis adicionar autenticação básica a um envio de formulário, sem habilitar cookies. Por exemplo, quando você tem campos de nome de usuário / senha com seus campos filename, file, etc.

    Espero que isto ajude!

    PURE JS: Use o seguinte código

     let photo = document.getElementById("image-file").files[0] // get file from input let formData = new FormData(); formData.append("photo", photo); // formData.append("user", JSON.stringify(user)); // you can add also some json data to formData like eg user = {name:'john', age:34} let xhr = new XMLHttpRequest(); xhr.open("POST", '/upload/image'); xhr.send(formData); 
    • No lado da serwer você pode ler o nome do arquivo original (e outras informações), que é automaticamente incluído na solicitação acima.
    • Você NÃO precisa usar xhr.setRequestHeader('Content-Type', 'multipart/form-data'); – isso será definido automaticamente pelo navegador.
    • Em vez de /upload/image você pode usar o endereço completo como http://.../upload/image .
    • Esta solução deve funcionar em todos os principais navegadores.

    Mais informações sobre resposta / manipulação de erros aqui .

    E aqui está o exemplo de trabalho .

    Como seu criador sou tendencioso;), mas você também pode considerar o uso de algo como https://uppy.io . Ele faz o upload do arquivo sem sair da página e oferece alguns bônus, como arrastar e soltar, retomar uploads em caso de falhas do navegador / redes escamosas e importar, por exemplo, do Instagram. É também open source e não depende do jQuery nem nada disso.