CODEWITHSUNDEEP
javascriptphpjqueryajax
Arran
Arran

Reputation: 154

Sending multiple images with AJAX

I've spent a while researching but can't figure this one out.

For a comment section on a website I have a form to enter your comment+rating, add some photos and I want this processed by a PHP script using AJAX and jQuery. Using regular POST no Ajax works so I'm certain the HTML is fine and my Javascript is off. When I try to use the following code to send the images across it doesn't receive the images or lists only 1 image and a broken filepath.

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

Then my PHP processing

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

Any help in posting multiple images to PHP with AJAX would be much appreciated.

Upvotes: 1

Views: 1607

Answers (1)

Darshan
Darshan

Reputation: 345

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>

The php code for the same

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

Upvotes: 3

Related Questions