1

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.

2
  • 1
    what errors do you have? Nov 20, 2017 at 8:41
  • Check your console for errors... Nov 20, 2017 at 8:45

1 Answer 1

3

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";
    }    
?>
1
  • 1
    I tried this, I didn't get results until I eliminated the first [$i] after ["authorImg"] in the for loop but $_FILES["authorImg"]["tmp_name"][$i]; works perfectly with the HTML given, thanks
    – Arran
    Nov 21, 2017 at 0:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.