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;
},