Eddig Stackoverflow-ról ellesett serializeObject() függvényt használtam a célra, de jött az az igény, hogy fájlokat is kellene küldeni a postban. Keresgéltem, de vagy szörnyen körülményes vagy félkész megoldásokat találtam csak. Így egyesítettem a találtakat:
<form id="form_new" action="#" enctype="multipart/form-data"> <input id="szoveg1" name="szoveg1" type="text" /> <input id="szoveg2" name="szoveg2" type="text" /> <input id="fajl1" name="fajl1" type="file" /> </form>
És a jQuery része:
var formData = new FormData( $('#form_new')[0] );
formData.append('sid', sid);
$.ajax({
url: 'ajax_cel.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
cache: false,
dataType: 'json',
success: function(data, textStatus, jqXHR) {
if(typeof data.error === 'undefined') {
// feltoltes rendben
}
else {
// feltoltesi hiba
}
},
error: function(jqXHR, textStatus, errorThrown) {
// feltoltesi hiba
},
complete: function() {
// feltoltes kesz
}
});
A PHP-ban az eredmény a $_POST-ban és a $_FILES-ben érhető el. Ez a megoldás jól működik a HTML form tömbökkel is. A fenti példa alapján $_POST[‘szoveg1’], $_POST[‘szoveg2’] és $_FILES[‘fajl1’];
Update #1: Ha szeretnék a feltöltés folyamatát is mutatni, akkor a következőt kell a $.ajax objektumba tenni:
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
//Download progress
xhr.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with download progress
console.log(percentComplete);
}
}, false);
return xhr;
},
