JQuery multiple file upload

Question

I have a problem while I am trying to upload multiple files using the following code. When I tried to select multiple files, I show only first file from multiple files. How can I get all these file names with all information such as temp name and type?

Here is HTML code for multiple upload:

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
<h3>Upload your Documents Here</h3> 
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<style>
.col-md-4 {
    float: none;
}
</style>

<div class="col-md-4">


 <div class="input-group">
                     <label for="startDate">Select Month-Year :</label><br />
                     <input name="startDate" id="startDate" class="date-picker form-control" placeholder="Select Month-Year" />

                    </div>
                    <br />
                    <br />
                      <script src="js/jquery.monthpicker.min.js"></script> 

<script>
$(document).ready(function() {

    $('#startDate').monthpicker();

    });
    </script>


<input type="file" name="photos[]" id="photoimg" multiple="true" class="form-control" />
</div>
<br />
<br />
</div>
</form>

And here is the JQuery ajax call:

 $('#photoimg').die('click').live('change', function(){ 
                   //$("#preview").html('');

         if($('#startDate').val()=='' ||  $('#startDate').val()==null )
         {
            alert("Select Month/year");
            return false;
         }
         else
         {
            var d=$('#startDate').val();
           $.ajax({
        type: "POST",
        url: "mdoc_upld.php",
        data: {'startDate':d,'files': $('#photoimg').val()}
    }).done(function(data){
        $("#preview").html(data);
         });
         }
        });

Finally, this is how the uploaded files are processed:

require_once "connection.php";
define ("MAX_SIZE","9000"); 
function getExtension($str)
{
         $i = strrpos($str,".");
         if (!$i) { return ""; }
         $l = strlen($str) - $i;
         $ext = substr($str,$i+1,$l);
         return $ext;
}


$valid_formats = array("pdf", "xls","xlsx","doc","docx");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") 
{
    print_r($_POST);exit;
    if(isset($_POST['startDate']) && $_POST['startDate'] !='')
    {
        $d=$_POST['startDate'];
       // $unixtime = 602294400;
        $time = date("Y-m",$d);
        //echo $time ;

    }

The call to print_r shows only one file name, but it should be array of all file names right?

How can I get access to all the files that were uploaded?

Answer 1

I found this tutorial for multiple image upload. here is link to tutorial

If you want to upload pdf file or any other , you just need to replace following line in ajaxImageupload.php

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");

with this line

$valid_formats = array("pdf", "doc", "docx");

add more file extensions here.

And one more thing, if you are following this tutorial for multiple file upload for any file type, you just need to replace following code jquery.wallform.js

        var exp = /<img[^>]+>/i;

        expResult = data.match(exp);
       if(expResult == null)
       {
        alert("Something went wrong.");
       }
       else{
        $(options.target).prepend(data);
        }

with this code:

$(options.target).prepend(data);

Here you are done. Enjoy and credit goes to 9lessons