javascript - 拖放图像不起作用

Question

该代码适用于一张图片。我的意思是，如果我只放下一张图片，它就可以工作!

但是如果我删除多张图片，只会上传最后一张。

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)
{
  for (var i = 0; i < 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 to send dropped files to 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>

Answer 1

你需要修改

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

然后修改你的

obj.on('drop', function (e) 
{
    $(this).css('border', '2px dotted #0B85A1');
    e.preventDefault();

    //push the new file in files list
    files.push(e.originalEvent.dataTransfer.files);

    console.log("files : ", files);

    //We need to send dropped files to Server
    //handleFileUpload(files,obj);

    handleFileUpload(files,obj); 
});