Mehrere Bilder mit AJAX senden

Question

Ich habe eine Weile damit verbracht, zu recherchieren, kann das aber nicht herausfinden.

Für einen Kommentarbereich auf einer Website habe ich ein Formular, um Ihren Kommentar + Bewertung einzugeben, fügen Sie einige Fotos hinzu und ich möchte dies von einem PHP-Skript mit AJAX und jQuery verarbeitet. Mit regulärem POST funktioniert kein Ajax, also bin ich mir sicher, dass der HTML-Code in Ordnung ist und mein Javascript deaktiviert ist. Wenn ich versuche, den folgenden Code zum Senden der Bilder zu verwenden, werden die Bilder nicht oder nur 1 Bild und ein beschädigter Dateipfad aufgelistet.

HTML-Code

<form action='javascript:void(0)' enctype='multipart/form-data' id='author-review-form'> 
    <input type='text' class='form-control' id='authorRating' name='authorRating' placeholder='4.6'> 
    <textarea class='form-control' id='authorReview' name='authorReview' rows='4'></textarea> 
    <input type='file' id='authorImg' name='authorImg' style='display:none;' multiple> 
    <button class='btn btn-primary' type='submit'><i class='fa fa-comment-o'></i> Post comment</button> 
</form> 

Javascript

$('#author-review-form').submit(function(e) { 
    e.preventDefault(); 
    var form = new FormData($('#author-review-form')[0]); 
    $.ajax({ 
     url: "scripts/add-comment.php", 
     method: "POST", 
     data: form, 
     processData: false, 
     contentType: false, 
     success: function(result){ 
      console.log("Response:\n"+result); 
     }, 
     error: function(er){ 
      console.log("Error\n"+er); 
     } 
    }); 
}); 

Dann meine PHP Verarbeitung

<?php 
    session_start(); 
    include 'functions.php'; 
    extract($_POST); 
    $user = $_SESSION['username']; 
    $productID = $_SESSION['product-view']; 
    //Check receiving data 
    echo "Rating $authorRating\n"; 
    echo "Review $authorReview\n"; 
    if(count($_FILES['authorImg']['name'])>0) echo "Files received\n"; 
    else echo "No files received\n"; 
    echo "Files received ".count($_FILES['authorImg']['name'])."\n"; 
    for($i=0;$i<count($_FILES['authorImg']['name']);$i++) { 
     $tmpFile = $_FILES['authorImg']['tmp_name'][$i]; 
     echo "File $i at $tmpFile\n"; 
    } 
?> 

er Beliebig Lp beim Posten mehrerer Bilder in PHP mit AJAX würde sehr geschätzt werden.

Answer 1

Html-Code

<form action='javascript:void(0)' enctype='multipart/form-data' id='author-review-form'> 
    <input type='text' class='form-control' id='authorRating' name='authorRating' placeholder='4.6'> 
    <textarea class='form-control' id='authorReview' name='authorReview' rows='4'></textarea> 
    <input type='file' id='authorImg' name='authorImg[]' style='display:none;' multiple><!-- we are sending multiple files hence this should be an array like this--> 
    <button class='btn btn-primary' type='submit'><i class='fa fa-comment-o'></i> Post comment</button> 
</form> 

Der PHP-Code für die gleiche

<?php 
    session_start(); 
    include 'functions.php'; 
    extract($_POST); 
    $user = $_SESSION['username']; 
    $productID = $_SESSION['product-view']; 
    //Check receiving data 
    echo "Rating $authorRating\n"; 
    echo "Review $authorReview\n"; 
    //the files send from the fontend is as an array so we should use a for loop 
    //you can print the $_FILES and see the indexes and give the loop accordingly 
    for($i=0;$i<count($_FILES['authorImg']);$i++){ 
     $tmpFile = $_FILES['authorImg'][$i]['tmp_name'][$i]; 
     echo "File $i at $tmpFile\n"; 
    }  
?>