Multiple images uploading issue

Question

I am trying to insert multiple images in database. On submit, i am getting only one image details in $_FILES[]. Why the other submitted images are not displaying in array?

Also, upload.php has error saying Array to string conversion in C:\\xampp\\htdocs\\kabootar\\upload.php on line 15 that is

$targetFile = $targetDir.$fileName; 

How can i solve these problems?

html

    <form action="upload.php" method="post" enctype="multipart/form-data">
        <input type="submit" value="Upload" name="upload">

        <label class="add">Select more..</label>
         <div class="prep">

        <div class="col-md-4">
            <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img" />
   <input type="file" class="inputimg" name="multiple_uploaded_files[]" />
        </div>


         </div>

    </form> 

javascript

<script type="text/javascript">
$(document).on("click", ".img", function () {

    $(this).closest("div").find(".inputimg").trigger("click");
});

var count = 1;
$(".add").on("click", function () {
    count++;
    if(count <= 5){
        var row = '<div class="col-md-4"> <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ ><input type="file" class="inputimg" />\n\
       ';
    $(".prep").append(row);

    $(".inputimg").change(function () {
        console.log(this);
        readURL(this);
    });
    }else{
        alert('You are only allowed to add uptp 5 images');
    }


});
$(".inputimg").change(function () {
    readURL(this);
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $(input).siblings('.img').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

upload.php

if(isset($_POST['upload']))
{

if(!empty($_FILES)){

  foreach ($_FILES['multiple_uploaded_files']['name'] as $file)
 {
    $targetDir = "upload/";
    $fileName = $_FILES['multiple_uploaded_files']['name'];   
    $targetFile = $targetDir.$fileName; 
        //use the move_uploaded_file() to move your file on your server directory.
if(move_uploaded_file($_FILES['multiple_uploaded_files']['tmp_name'][$file], $targetFile))
{
        //insert file information into db table
 $sql = mysqli_query($link,"INSERT INTO files (file_name, uploaded) VALUES('".$fileName."','".date("Y-m-d H:i:s")."')");
 echo 'file inserted';  
 }
    else
    {
        echo 'Query not working';
    }

}
        //fire an insert query that inserts all the file names with comma separated value
    }
else
{
    echo 'No file selected';
}

Answer 1

You are trying to concat string with array $_FILES['multiple_uploaded_files']['name']. For Array to string conversion error

replace the code

$fileName = $_FILES['multiple_uploaded_files']['name'];   

with

$fileName = $file;   (or)
$fileName = $_FILES['multiple_uploaded_files']['name'][0];   

Single file upload issue. You have not added name attribute for the input tag in javascript code.

replace

    var row = '<div class="col-md-4"> <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ ><input type="file" class="inputimg" />\n\';

With

    var row = '<div class="col-md-4"> <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ ><input type="file" class="inputimg" name="multiple_uploaded_files[]"/>\n\';

Note: added name attribute to the input tag.