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

＆＃13;

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

＆＃13;

在jquery中显示删除的图像

1 个答案: