[....]"/> jQuery: Form serialized $.post, fájlokkal is – Legyes.hu

jQuery: Form serialized $.post, fájlokkal is

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