javascript - Drag and drop image is not working -

the code works 1 image. mean if drop 1 image, works!

but if drop multiple images, last 1 uploaded.

var itemcount = 0;  var files=0;    function sendfiletoserver(fdata)  {    var extradata ={}; //extra data.    var jqxhr=$.ajax({    url: "actions/analyzer.upload.php?uploaditem=1&udid="+math.random(),    type: "post",    contenttype:false,    processdata: false,      cache: false,      data: fdata,      success: function(data){        $('.dhui'+data);//.fadeout("slow").addclass('removeit');      }    });  }      function handlefileupload(files,obj)  {    (var = 0; < files.length; i++)     {      //$('#drophere').find('dhui'+itemcount+'.uploaditempreview').append('file', files[i].name);      var this_file = files[i];      reader = new filereader();      reader.onload = function (event) {                        itemcount = itemcount+1;        $('#drophere').append('<div class="uploaditem dhui'+itemcount+'">\          <div class="uploaditempreview"></div>\          <div><img src="../style/images/uploading.gif" id="upldng" alt=""></div>\          </div>');                                        $('#drophere').find('.dhui'+itemcount+' > .uploaditempreview').append('<img width="88" src="'+event.target.result+'" />');                      };      reader.readasdataurl(files[i]);                        var fd = new formdata();      fd.append('file', files[i]);            sendfiletoserver(fd);          }  }      var obj = $("#drophere");  obj.on('dragenter', function (e)   {      e.stoppropagation();      e.preventdefault();      $(this).css('border', '2px solid #0b85a1');  });  obj.on('dragover', function (e)   {       e.stoppropagation();       e.preventdefault();  });  obj.on('drop', function (e)   {      files = 0;    $(this).css('border', '2px dotted #0b85a1');      e.preventdefault();      files = e.originalevent.datatransfer.files;      //we need send dropped files server      //handlefileupload(files,obj);        handlefileupload(files,obj);  });    $(document).on('dragenter', function (e)   {      e.stoppropagation();      e.preventdefault();  });  $(document).on('dragover', function (e)   {    e.stoppropagation();    e.preventdefault();    obj.css('border', '2px dotted #0b85a1');  });  $(document).on('drop', function (e)   {      e.stoppropagation();      e.preventdefault();  });

* {    font-family: tahoma  }  .uploaditem{    width:90px;    height:120px;    border:1px dashed #6ac9eb;    float:left;     margin-left:5px;    overflow: hidden;  }    .uploaditem .uploaditempreview{    height:106px;    width:100%;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table width="100%" height="500" border="0" dir="rtl" style="background-color:#cce1f3">       <tr>           <td align="center" valign="middle">               <div style="color: rgb(76, 135, 197); height: 590px; width: 100%; background:url(../style/images/drophere.png) center no-repeat" id="drophere"></div>           </td>       </tr>   </table>

you need modify

var files=0; var files = []; //i.e. list of storing files  

and modify

obj.on('drop', function (e)  {     $(this).css('border', '2px dotted #0b85a1');     e.preventdefault();      //push new file in files list     files.push(e.originalevent.datatransfer.files);      console.log("files : ", files);      //we need send dropped files server     //handlefileupload(files,obj);      handlefileupload(files,obj);  });