Issue on Uploading Multiple Images to Server By One Click

Question

I am trying to upload multiple images to server by one click. I am not getting any error on JavaScript console but no images uploaded to the server. Can you please let me know what I am doing wrong?

Here is my HTML markup

<form id="uploadimage" action="" method="post" enctype="multipart/form-data">
        <div class="row">
            <div class="col-xs-6 col-md-3 text-center">
                <a href="#" class="thumbnail ">
                    <div class="img-box">
                        <input type="file" class="file" name="image" />                            <img class="img img-responsive" />
                    </div>
                </a>
            </div>
            <div class="col-xs-6 col-md-3 text-center">
                <a href="#" class="thumbnail ">
                    <div class="img-box">
                        <input type="file" class="file" name="image" />
                        <img class="img img-responsive" />
                    </div>
                </a>
            </div>
        </div>
        <input type="submit" value="Upload" class="submit" />
</form>

js file as:

 $("#uploadimage").on('submit', (function(e) {
     e.preventDefault();
     $.ajax({
         url: "loader.php",
         type: "POST",
         data: new FormData(this),
         contentType: false,
         cache: false,
         processData: false,
         success: function(data) {

         }
     });
 }));

and PHP (loader.php) as

<?php
if (isset($_FILES["file"]["type"])) {
    $validextensions = array(
        "jpeg",
        "jpg",
        "png"
    );
    $temporary       = explode(".", $_FILES["file"]["name"]);
    $file_extension  = end($temporary);
    if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")) && ($_FILES["file"]["size"] < 100000) //Approx. 100kb files can be uploaded.
        && in_array($file_extension, $validextensions)) {
        if ($_FILES["file"]["error"] > 0) {
            echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>";
        } else {
            if (file_exists("upload/" . $_FILES["file"]["name"])) {
                echo $_FILES["file"]["name"] . " <span id='invalid'><b>already exists.</b></span> ";
            } else {
                $sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
                $targetPath = "upload/" . $_FILES['file']['name']; // Target path where file is to be stored
                move_uploaded_file($sourcePath, $targetPath); // Moving Uploaded file
                echo "<span id='success'>Image Uploaded Successfully...!!</span><br/>";
            }
        }
    } else {
        echo "<span id='invalid'>***Invalid file Size or Type***<span>";
    }
}
?>\

Answer 1

Please refer this .
when you send multiple files, php accept it as an array of files but in your code you are accepting them as a single file. Also, try to give array of name as

<input type="file" name="images[]" id="images" multiple >

Answer 2

1. In a form, the name is the identifier of the input. So you should do $_FILES["image"] to access your file.
2. When a form have multiple inputs with the same name, it must be name with [] at the end (at least in php). So rename your image[] in the html source.

Answer 3

first, your file array you are taking in controller is wrong,

$temporary       = explode(".", $_FILES["file"]["name"]);

you need to take image instead of file because in form file input name you used is image so,

$temporary       = explode(".", $_FILES["image"]["name"]);

then after in your html you can take like this as thisisme_22 suggests

<input type="file" name="images[]" id="images" multiple >

then after in you action php file you can take count of the files and the using for or foreach you can get single file and upload it, like this

$count = count($FILES['image']['name']);
for($i = 0 ; $i < $count ; $i++){
    $file = $FILES['image']['name'][$i];
}

I hope it helps.

Answer 4

check this code and change it as you need

$arr =  array();
$arr = $_FILES['image']['name'];

    for($i = 0; $i < count($arr) ; $i++)
    {
            $file_name = $_FILES['image']['name'][$i];
            $file_size = $_FILES['image']['size'][$i];
            $file_tmp = $_FILES['image']['tmp_name'][$i];
            $file_type = $_FILES['image']['type'][$i];  

        $responce = move_uploaded_file($file_tmp, "orders/".$file_name);

    }