AJAX-Bild-Upload mit FormData zeigt kein Bild auf der Serverseite

Question

Ich mache ein Bild-Upload-System, das das Bild einfach hochlädt, sobald es an das Element input[type='file'] angeschlossen ist. Ich habe jedoch Schwierigkeiten, das Image auf die Serverseite zu bekommen.

Testfall

HTML:

<a class="button" data-action="upload-images">Upload Image</a> 
<div style="display:none;"> 
    <form method="POST" enctype="multipart/form-data" class="image-upload-form"> 
     <input type="file" name="image" data-caller="upload-images" accept="image/*" /> 
     <input type="hidden" name="object_id" value="1"/> 
    </form> 
</div> 

JavaScript:

// Let a custom button open the file selection frame 
jQuery(document).on("click", "[data-action='upload-images']", function() { 
    jQuery(this).parent().find("[data-caller='upload-images']").click(); 
}); 

// Catch a file upload 
jQuery(document).on("change", "[data-caller='upload-images']", function() { 

    jQuery.ajax({ 
     url: "ajax/image-upload", 
     type: "POST", 
     data: new FormData(this.parentNode), 
     contentType: false, 
     processData: false, 
     success: function(data) { 
      console.log(data); 
     } 
    }); 

}); 

PHP:ajax/Bild-Upload

var_dump($_POST); 

Testing

Ausführen dieses Code gibt die folgende Ausgabe in der Konsole:

array(1) { 
    ["object_id"]=> 
    string(1) "1" 
} // No image? 

Die Anfrage Nutzlast:

------WebKitFormBoundaryi8mRsBbBQSmCgZ4f 
Content-Disposition: form-data; name="image"; filename="TrueTone.png" 
Content-Type: image/png 


------WebKitFormBoundaryi8mRsBbBQSmCgZ4f 
Content-Disposition: form-data; name="object_id" 

1 
------WebKitFormBoundaryi8mRsBbBQSmCgZ4f-- 

Was ich versucht habe

I kann wirklich keinen Weg finden, das hochgeladene zu bekommen Bild zur Serverseite. Bisher habe ich ein paar Tutorials gesehen, die dieselbe Methode verwenden, aber den Datei-Upload onSubmit abfangen und e.preventDefault verwenden, um die tatsächliche Einreichung abzubrechen. Ich habe meinen Code mit einem Submit-Button komplett neu geschrieben, um diesen Weg zu kopieren, ohne Erfolg zu haben.

Die Anforderungsnutzlast gibt an, dass die Datei hochgeladen wird, sie ist jedoch auf der Serverseite nicht sichtbar. Ich hoffe ihr könnt mir helfen.

Answer 1

Verwenden Sie print_r($_FILES), um zu überprüfen, ob eine Datei gesendet wurde und nicht $_POST.