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