85

Gostaria de saber se existe alguma forma simples de realizar um upload de arquivos via AJAX + JSON.

Se houver, qual seria?

2
  • 5
    Que linguagem existe no lado do servidor? Porquê JSON? i.e. referes-te ao JSON para uma função específica?
    – Sergio
    Commented 18/03/2014 às 17:58
  • Há uma resposta deletada sugerindo este vídeo tutorial: Upload com jQuery e barra de progresso
    – brasofilo
    Commented 1/11/2014 às 13:48

4 Respostas 4

83

Você pode fazer uploads de arquivos utilizando o método POST porém deve incluir o FormData com a propriedade enctype definida como multipart/form-data para que seus arquivos sejam enviados na requisição.

Contudo, a formatação do envio não vai ser um JSON, mas sim no enctype que você definir no seu FormData, que dependendo da linguagem que você está utilizando no backend vai ter uma forma diferente de interpretar estes dados.

  • application/x-www-form-urlencoded: é o enctype padrão, todos os valores de espaço são convertidos para "+" e caracteres não padrões são convertidos para representação ANSII HEX;
  • multipart/form-data: nenhum caractere é convertido, mantendo os valores do formulário intactos, necessário para upload de arquivos;
  • text/plain: apenas espaços são convertidos em "+";

Sendo essas as possibilidades, o que está sendo trafegado não é um JSON quando vamos comunicar enviando dados para o servidor. Esses dados são serializados para serem entregues dentro da área de data do método que você esta utilizando pra trafegar via HTTP(S) dentro dos formatos apresentados.

Durante o upload você pode capturar (nos browsers modernos) evento de progresso do upload, conforme no exemplo abaixo.

Exemplo utilizando jQuery

Formulário

<form id="formulario" method="post" enctype="multipart/form-data">
    <input type="text" name="campo1" value="hello" />
    <input type="text" name="campo2" value="world" />
    <input name="arquivo" type="file" />
    <button>Enviar</button>
</form>

Javascript

$("#formulario").submit(function() {
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function(data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() { // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) { // Avalia se tem suporte a propriedade upload
                myXhr.upload.addEventListener('progress', function() {
                    /* faz alguma coisa durante o progresso do upload */
                }, false);
            }
            return myXhr;
        }
    });
});
6
  • como faz para escolher a pasta onde o arquivo será enviado?
    – Tiago
    Commented 4/09/2015 às 14:06
  • Detalhe muito importante, no I.E o FormData funciona somente a partir da versão 10 em diante Commented 10/09/2015 às 18:18
  • cara funcionou perfeitamente no meu sistema, vlw.
    – periotto
    Commented 22/09/2015 às 20:19
  • 1
    @GabrielGartz como eu poderia utilizar seu código para preencher uma tag progress no submit? <progress id="progress" value="0"></progress> Commented 19/09/2018 às 19:25
  • Mas se o FormData é envio via ajax/javascript, o enctype influencia? Commented 20/09/2018 às 21:16
40

Implementação simples do lado "client":

HTML:

<input type="file" id="fileUpload" name="fileUpload" />
<input type="button" id="btnEnviar" value="Enviar" />

Javascript

$(function () {

    var form;
    $('#fileUpload').change(function (event) {
        form = new FormData();
        form.append('fileUpload', event.target.files[0]); // para apenas 1 arquivo
        //var name = event.target.files[0].content.name; // para capturar o nome do arquivo com sua extenção
    });

    $('#btnEnviar').click(function () {
        $.ajax({
            url: 'URL SERVER', // Url do lado server que vai receber o arquivo
            data: form,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function (data) {
                // utilizar o retorno
            }
        });
    });
});

Sugiro que você busque por tutorias mais completos na internet. Busque por "file upload ajax" que o google vai te bombardear com diversos artigos, com implementações simples e complexas.

1
  • 2
    Cara, eu te amo, namoral kkkk Commented 19/09/2018 às 20:00
9

Utilizo uma forma genérica na maioria das páginas que utilizo, tanto em formulários com upload de arquivos quanto formulários sem upload de arquivos.

$(form).on('submit', function () {
    var data;
    var contentType = "application/x-www-form-urlencoded";
    var processData = true;
    if ($(this).attr('enctype') == 'multipart/form-data') {
        data = new FormData($('.form-horizontal').get(0));//seleciona classe form-horizontal adicionada na tag form do html
        contentType = false;
        processData = false;
    } else {
        data = $(this).serialize();
    }
    $.ajax({
        data: data,
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        contentType: contentType,
        processData: processData,
        success: function (response) {
            //seu código após sucesso
        },
        error: function (exr, sender) {
                alert('Erro ao carregar pagina');
        }
    });
}
8

Uma solução simples de upload de múltiplos arquivos utilizando Ajax:

HTML:

<input type="file"  id="uploadArquivos" multiple>

JAVASCRIPT - AJAX:

var uploadArquivo = $("#uploadArquivos");

uploadArquivo.on('change', function(e) {
  files = e.target.files;
  var formData = new FormData(),
    file = [];

  $.each(files, function(key, val) {
    file[key] = val;
  });

  formData.append('file', file);

  $.ajax({
    url: 'urlDoArquivo',
    cache: false,
    contentType: false,
    processData: false,
    data: formData,
    type: 'post',
    success: function(data) {

    }
  });

});

Quando o usuário selecionar os arquivos ele criará um formData inserindo cada arquivo e seus detalhes e enviando para o arquivo da url do ajax, se for em php você poderá pegar este valor e mover para uma pasta assim:

PHP:

foreach ($_FILES as $value):
   move_uploaded_file($value['tmp_name'], '../temp/' . $value['name']);
endforeach;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .