All files are not getting from file upload control using jquery

Question

I am facing a problem during images upload.

I have an input type file control in my form and more input controls can be added using jquery. The problem is this: when I get all those control values, it only return the first value from file control.
How can I get all added files in all control? Here is my code:

Javascript

$(document).ready(function() {
  $('#add_more').click(function() {
    $(this).before($("<div/>", {
      id: 'filediv'
    }).fadeIn('slow').append(
      $("<input/>", {
        name: 'file[]',
        type: 'file',
        id: 'file',
        accept: '.jpg, .jpeg, .gif'
      }),
      $("<br/><br/>")
    ));
  });

  $('#upload').click(function(e) {
    var name = $(":file").val();
    if (!name) {
      alert("File Must Be Selected");
      e.preventDefault();
    } else {
      //upload all images
      var fileData = $('#file').prop("files")[0];
      var form_data = new FormData();
      form_data.append('file', fileData);
      $.ajax({
        url: "myurl.php",
        dataType: 'text',
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        type: "post",
        error: function() {
          alert('error');
        },
        success: function(ret) {
          alert('sucess');
        }

      });
    }
  }
});

HTML

<form enctype="multipart/form-data" action="" method="post">
  <hr/>
  <div id="filediv">
    <input name="file[]" type="file" id="file" accept=".jpg, .gif, .jpeg" />
  </div>
  <br/>
  <input type="hidden" value="" id="class" name="class">
  <input type="button" id="add_more" class="upload" value="Add More Files" />
  <input type="button" value="Upload File" name="submit" id="upload" class="upload" />
</form>

When I get the post from php using $_FILES['file']['name'] and counting it using count($_FILES['file']['name']) it returns 1.

When I process further, only the first file is uploaded in the corresponding folder.
Something is probably wrong on line var fileData = $('#file').prop("files")[0];.

Answer 1

Your JS Code should be as below :

  $(document).ready(function () {
        $('#add_more').click(function () {
            $(this).before($("<div/>", {
                id: 'filediv'
            }).fadeIn('slow').append(
                    $("<input/>", {
                        name: 'file[]',
                        type: 'file',
                        // Id must be unique
                        // id: 'file',
                        class: "file_input",
                        accept: '.jpg, .jpeg, .gif'
                    }),
                    $("<br/><br/>")
                    ));
        });

        $('#upload').click(function (e) {
            var boolAreAllFilesSelected = true;
            var objFormData = new FormData();
            $.each($(":file"), function ( ) {
                if (!$(this).val())
                {
                    alert("File Must Be Selected");
                    $(this).focus();
                    return   boolAreAllFilesSelected = false;
                }
                else
                {
                    objFormData.append('file[]', $(this).prop("files")[0]);
                }
            });

            if (boolAreAllFilesSelected)
            {
                $.ajax({
                    url: "myurl.php",
                    dataType: 'text',
                    data: objFormData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: "post",
                    error: function () {
                        alert('error');
                    },
                    success: function (ret) {
                        alert('sucess');
                    }
                });
            }
        });
    });

Your PHP Code should be as below :

<?php

function uploadSingleImage($arrSingleFile = array())
{
    if (!empty($arrSingleFile))
    {
        // Here your image uploading code
    }
}

if (!empty($_FILES['file']))
{
    $arrFile = $_FILES['file'];
    foreach ($arrFile['name'] as $intIndex => $strName)
    {
        $arrSingleFile["name"]           = $strName;
        $arrSingleFile["type"]           = $arrFile['type'][$intIndex];
        $arrSingleFile["tmp_name"]       = $arrFile['tmp_name'][$intIndex];
        $arrSingleFile["error"]          = $arrFile['error'][$intIndex];
        $arrSingleFile["size"]           = $arrFile['size'][$intIndex];
        uploadSingleImage($arrSingleFile);
    }
}
else
{
    die("You have not uploaded any file.");
}