T.M. SoftStudio

feci quod potui, faciant meliora potentes

Отправка HTML формы с помощью объектов XMLHttpRequest и FormData

 

XMLHttpRequest – представляет собой JavaScript-объект, который может использоваться для асинхронного обмена данными с сервером.

Программный интерфейс XMLHttpRequest Level 2 добавляет поддержку для программного интерфейса FormData, позволяющего конструировать набор пар ключ-значение, представляющих поля формы, для последующей отправки на сервер с помощью метода  send() объекта XMLHttpRequest.

 

Отправка формы целиком:

var form = document.getElementById('id_form');

var formData = new FormData(form);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function(e) {

if (e.lengthComputable) {

var percentage = Math.round((e.loaded * 100) / e.total);

$('#id_div').find('#id_percent').text(percentage+'%');

}

}, false);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

var xml=xhr.responseXML;

var result = xml.getElementsByTagName('result')[0].firstChild.data;

var data="";

if(result!=""){

data=result;

}

}};

xhr.open("POST", url);

xhr.send(formData);

 

Отправка только файлов:

<input id="input_upload_file" type="file" name="files[]" multiple >

var fileInput = document.getElementById('input_upload_file');

var files = fileInput.files[0];

var formData = new FormData();

formData.append('files[]', files);

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", function(e) {

if (e.lengthComputable) {

var percentage = Math.round((e.loaded * 100) / e.total);

$('#id_div').find('#id_percent').text(percentage+'%');

}

}, false);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

var xml=xhr.responseXML;

var result = xml.getElementsByTagName('result')[0].firstChild.data;

var data="";

if(result!=""){

data=result;

}

}};

xhr.open("POST", url);

xhr.send(formData);