JQuery form.serialize() gibt einen leeren String zurück, auch wenn das name-Attribut für Formularelemente definiert ist

Question

Es scheint ein einfaches Problem zu sein, aber es war schon eine Stunde, die mir jetzt den Kopf zerbrach. Ich habe ein Formular, das Datei von Benutzer an den Server mit Ajax senden akzeptiert. Problem, das ich gegenüberstelle, ist in $(this).serialize(), die immer eine leere Zeichenfolge zurückgibt. Ich habe das Namensattribut für das Eingabefeld definiert. Funktion scheint auch korrekt zu sein kann jemand darauf hinweisen, wenn ich etwas vermisse !!

Es gibt viele ähnliche Ques bereits auf diesem, aber die meisten Antworten sagen, dass es Namensattribut benötigt, das bereits vorhanden ist.

Form:

<form action="/upload" name="upload_form" method="POST" id="upload-form"> 
    <input type="file" name="file" value=""/><br /> 
    <input type="submit" name="submit" value="Upload"/> 
    <input type="reset" name="clear" value="Clear"/> 
</form> 

Script

  $(document).ready(function() { 
       $('#upload-form').on('submit', function(e) { 
        e.preventDefault(); 
        console.log($(this).serialize()); 
        $.ajax({ 
         url : $(this).attr('action'), 
         type: "POST", 
         data: $(this).serialize(), 
         success: function (data) { 
          console.log(data); 
         }, 
         error: function (jXHR, textStatus, errorThrown) { 
          alert(errorThrown); 
         } 
        }); 
       }); 
      }); 

Answer 1

enctype="multipart/form-data" Fügen Sie, wenn Sie mit Datei-Upload handelt. Wenn Sie Ajax verwenden, können Sie FormData Objekt aufrufen und verwenden. Es wird also so etwas sein.

var formFile = new FormData(); 
     formFile.append('file',$('#id_of_fileinput')[0].files[0]); 
$.ajax({ 
      url: path_to_php, 
      type:"POST", 
      data: formFile, 
      dataType: "json", 
      processData: false, //important to include when uploading file 
      contentType: false, //important to include when uploading file 
      beforeSend: function(){ 
       $('.loading').show(); 
       $('.masked').show(); 
      }, 
      success: function(data){ 
       //do something with data 
       console.log(data); 
       $('.loading').hide(); 
       $('.masked').hide(); 
      } 
    }); 

Answer 2

Offenbar setzt die serialize Methode, um Ihre Formularfelder Daten in einem String nach der Anwendung/x-www-form-urlencoded Inhaltstyp verwendet Formulare zur Verarbeitung an Server senden, während Dateien in Anforderungen gesendet werden, die im Inhaltstyp multipart/form-data codiert sind. Serialize ignoriert also Dateieingaben.

Bitte beachten Sie diese Informationen:

http://www.bayt.com/en/specialties/q/1335/why-a-file-can-t-be-uploaded-through-jquery-serialize-function/