I would like to know if there is any simple way to upload files via AJAX + JSON.
If there is one, what would it be?
I would like to know if there is any simple way to upload files via AJAX + JSON.
If there is one, what would it be?
You can upload files using the POST
method, but you must include the FormData with the property enctype
set to multipart/form-data
so your files are sent in the request.
However, the formatting of the submission will not be a JSON, but in the enctype
that you set in your FormData
, depending on the language you are using in the backend will have a different way of interpreting this data.
These being the possibilities, what is being trafficked is not a JSON when we are going to communicate sending data to the server. This data is serialized to be delivered within the date area of the method you are using to traffic via HTTP (S) within the formats presented.
During upload you can capture (in modern browsers) upload progress event, as in the example below.
Example using jQuery
Form
<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;
}
});
});
Simple implementation of the "client" side:
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
}
});
});
});
I suggest you look for more complete tutorials on the internet. Search for #
I use a generic form on most pages I use, both in file uploaded forms and non-uploaded forms.
$(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');
}
});
}
A simple solution for uploading multiple files using 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) {
}
});
});
When the user selects the files he will create a formData by inserting each file and its details and sending it to the ajax url file, if it is in php you can take this value and move it to a folder like this:
PHP:
foreach ($_FILES as $value):
move_uploaded_file($value['tmp_name'], '../temp/' . $value['name']);
endforeach;