拖放圖片不能正常工作

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); 
});