Ziehen und Ablegen funktioniert nicht

Question

Der Code funktioniert für ein Bild. Ich meine, wenn ich nur ein Bild ablege, funktioniert es!

Wenn ich jedoch mehrere Bilder lösche, wird nur die letzte hochgeladen.

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

Sie benötigen die

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

zu ändern und ändern Sie Ihre

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