AJAXで複数の画像を送信する

Question

私はしばらくの間研究してきましたが、これを理解することはできません。

ウェブサイトのコメントセクションでは、あなたのコメント+評価を入力するフォームがあります。写真をいくつか追加して、AJAXとjQueryを使用したPHPスクリプトで処理します。通常のPOSTを使用するとAjaxは機能しませんので、HTMLは問題なく、Javascriptはオフになっています。次のコードを使用して画像を送信しようとすると、画像が表示されず、1つの画像と壊れたファイルパスしか表示されません。

HTMLコード

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

その後、私のPHP処理

<?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"; 
    } 
?> 

どれでも彼複数の画像をAJAXでPHPに投稿する際にlpが大変感謝しています。

Answer 1

HTMLコード

<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> 

同じ

<?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"; 
    }  
?>