在jquery中显示丢弃的图像

Question

我已经在html中做了拖放图像。 现在我想在该上传框中显示放置的图像。

我该怎么做？

$(document).ready(function() { 
 
    var obj = $(".drop"); 
 
    obj.on("dragover", function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    $(this).css("border", "1px solid lightblue"); 
 
    }); 
 
    obj.on("drop", function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    $(this).css("border", "1px solid lightblue"); 
 
    $(this).html(""); 
 
    // Now what to do to display the dropped image..? 
 
    }); 
 
});

.drop { 
 
    border: 2px dotted grey; 
 
    padding: 20px; 
 
    margin-bottom: 20px; 
 
    width: 500px; 
 
    height: 200px; 
 
    font-size: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="drop"> 
 
    <label for="fileselect">Files to upload:</label> 
 
    <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> 
 
    <div id="filedrag">or drop files here</div> 
 
</div>

Answer 1

您应该使用e.originalEvent.dataTransfer

$(document).ready(function() { 
 
    var obj = $(".drop"); 
 
    obj.on("dragover", function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    $(this).css("border", "1px solid lightblue"); 
 
    }); 
 
    obj.on("drop", function(e) { 
 
    e.stopPropagation(); 
 
    e.preventDefault(); 
 
    $(this).css("border", "1px solid lightblue"); 
 
    $(this).html(""); 
 
    // Now what to do to display the dropped image..? 
 
    var dt = e.originalEvent.dataTransfer; 
 
    var files = dt.files; 
 

 
    if (dt.files.length > 0) { 
 
     var file = dt.files[0]; 
 
     alert(file.name); 
 
    } 
 
    }); 
 
});