multiple file uploader, sends only one file

Question

I have tried this for almost two days, and it doesn't work, i have a simple input file (in php)

echo '<input id="files" type="file" name="ufile[]" multiple="multiple"/>';

That it suppose to send multiple files at the same time to another page, my code to receive the files is as below:

for($i=0; $i<count($_FILES['ufile']['name']); $i++) {
  //Get the temp file path
  $tmpFilePath = $_FILES['ufile']['tmp_name'][$i];

  //Make sure we have a filepath
  if ($tmpFilePath != ""){
    //Setup our new file path
    $newFilePath = 'upload/'. $_FILES['ufile']['name'][$i];

    //Upload the file into the temp dir
    if(move_uploaded_file($tmpFilePath, $newFilePath)) {

      //Handle other code here

    }
  }
}

but it can only receive one file, I've also tried to use copy, it gives the same result, I've tried tried to count the number of files using both count method, the print_r and var_dump:

$a=count($_FILES['ufile']['name']);
print_r($a);
var_dump($a);

and they all also show only file.about the browser compatibility, I've been tried it with few browsers, including latest versions of Firefox,chrome and ...

Thanks in Advance I edit this post, to include the outputs (var_dump) and add the html form The below is the javascript code, in which preview the images that i choose with my input, file. window.onload = function(){

    if(window.File && window.FileList && window.FileReader)
    {
        var filesInput = document.getElementById("files");

        filesInput.addEventListener("change", function(event){

            var files = event.target.files; //FileList object
            var output = document.getElementById("result");

            for(var i = 0; i< files.length; i++)
            {
                var file = files[i];

                if(!file.type.match('image'))
                  continue;

                var picReader = new FileReader();

                picReader.addEventListener("load",function(event){

                    var picFile = event.target;

                    var div = document.createElement("div");

                    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                            "title='" + picFile.name + "'/>";

                    output.insertBefore(div,null);            

                });

                picReader.readAsDataURL(file);
            }                               

        });
    }
    else
    {
        console.log("not supported");
    }
}

    </script>

and this is my html form :

echo '<form action="Data.php" method="post" enctype="multipart/form-data" name="form1" id="form1">';


echo'
<label for="files">Add image: </label>';

echo    '<input id="files" type="file" name="ufile[]" multiple/>';
    echo '
    <output id="result" />';

echo '<input type="submit" name="submit" value="Submit"id="newbutton" style="width:100px;height:30px" />';


</form> 

And lastly the results of vardump

Array ( [ufile] => Array ( [name] => Array ( [0] => Awesoem-Arrow-Facebook-Timeline-Cover_02-@-GenCept.jpg ) [type] => Array ( [0] => image/jpeg ) [tmp_name] => Array ( [0] => C:\xampp\tmp\php6BDF.tmp ) [error] => Array ( [0] => 0 ) [size] => Array ( [0] => 120664 ) ) ) 

Answer 1

Here, stripped down to the essentials, is how I have handled this same task in PHP in the past:

if (isset($_FILES['name'])){
    $maxFiles = 4; 
    $counter = 0;
         while (is_uploaded_file($_FILES['name']['tmp_name'][$counter])){
              /*
                      do your magic with each file here
                  */
                  //remove the temp file after you're done with it
                  unlink ($_FILES['name']['tmp_name'][$counter]);
                  $counter++;
            }
}

So instead of counting the total files uploaded beforehand, you just keep going through the files array until there are no more files. Let me know if that doesn't work for you.

Answer 2

One input field as "file" type can contain only one file. Do you use only one input field?