Gostaria de saber se existe alguma forma simples de realizar um upload de arquivos via AJAX + JSON.
Se houver, qual seria?
Gostaria de saber se existe alguma forma simples de realizar um upload de arquivos via AJAX + JSON.
Se houver, qual seria?
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.
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;
}
});
});
FormData
funciona somente a partir da versão 10 em diante
Commented
10/09/2015 às 18:18
<progress id="progress" value="0"></progress>
Commented
19/09/2018 às 19:25
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.
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');
}
});
}
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;