Wie übergibt man ausgewählte Datei mit jQuery an PHP-Skript?

Question

Das folgende Formular ist das, was ich benutze:

<form id="form-attachment" action="" method="post" enctype="multipart/form-data"> 
    <input name="attachment" type="file" /> 
    <input type="submit" /> 
</form> 

Dies ist, was ich mit jQuery tun:

$('body').on('submit', '#form-attachment', function(e) { 

    e.preventDefault(); 
    var data = $(this).serialize(); 

    console.log('fine', data); 

    var url = 'imageupload.php'; 

    $.ajax({ 
     type : "POST", 
     url : url, 
     data : data, 

     success : function(response) { 
      console.log('success: ' + response); 
     }, 
     complete : function(response) { 
      console.log('complete: ', response); 
     }, 
     error: function(response) { 
      console.log('error: ', response); 
     } 
    }); 
}); 

Und das ist meine imageupload.php Datei:

$response = array(); 
$response["c"] = isset($_FILES["attachment"]); 

echo json_encode($response); 

Und das ist das Ergebnis auf der Konsole submit():

Erfolg: { "c": false}

Also, was ist falsch? Warum ist meine Datei überhaupt nicht sichtbar?

Answer 1

Verwenden Sie FormData Objekt.

Hier ist das Beispiel, wie Datei über jQuery Ajax-Request senden:

$(document).on('change', 'input[type=file]', function() { 
    formData = new FormData; 
    formData.append('file', $(this)[0].files[0]); 
    $.ajax { 
    url: '/upload-url', 
    data: formData, 
    type: 'post', 
    processData: false, 
    contentType: false, 
    success: function(data) { 
     console.log(data); 
    } 
    } 
}); 

In Ihrem Fall sollten Sie Form serialisiert erste, serialisierten Daten an das Objekt Formdata anhängen. Rufen Sie dann die Datei (oder die Dateien) aus einem Dateifeld ab und hängen Sie sie an dasselbe formData-Objekt an. Und schließlich senden Sie das FormData-Objekt über Ajax.

Answer 2

können Sie FormData-Objekt verwenden, wie unten ..

$('body').on('submit', '#form-attachment', function(e) { 
var data = new FormData(jQuery('#form-attachment')[0]); 
jQuery.ajax({ 
    type: "post", 
    contentType: false, 
    processData: false, 
    url: jQuery(this).attr('action'), 
    dataType: "json", 
    data: data, 
    success: function (r) { 
    // Success Handeling 
    } 
    }); 
}); 

Hinweis gezeigt: - keine Notwendigkeit, etwas anhängen als andere Antwort vermuten lässt. Diese Methode soll alle Eingabefelder wie in einer normalen http-Form POST Methode übergeben.