删除事件未获取文件列表

Question

我想从浏览器中拖出一张图片并将其放到一个对象中，然后像这样简单地获取拖放的文件：

$('#image-upload-preview').on('drop', drop);

function drop(e) {
  const file = e.originalEvent.dataTransfer;
  console.log('file', file[0]); // this brings undefined
  //console.log('file', file); // this bring empty file list
}

window.addEventListener("dragover", (e) => {
  e = e || event;
  e.preventDefault();
}, false);

window.addEventListener("drop", (e) => {
  e = e || event;
  e.preventDefault();
}, false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_container">
  <img id="image-upload-preview" style="width:100%" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSClDjLZzrjD5FHPX-nNU5QoTWK-C2XcOD-M6Aabozw6Oem8-0ejje8Lk5DmNbhVOvvMfc&usqp=CAU">
  <div id="cropped_result"></div>
</div>

但是文件返回空文件列表？？？

我该如何解决这个问题？

Answer 1

你没有得到文件列表，因为你的 const 不正确。

你需要放 .files : e.originalEvent.dataTransfer.const.files

$('#image-upload-preview').on('drop', drop);

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var file = e.originalEvent.dataTransfer.files;
  var fd = new FormData();

  console.log(file[0]);

  fd.append('file', file[0]);
  
  // process upload with ajax
}

window.addEventListener("dragover", (e) => {
  e = e || event;
  e.preventDefault();
}, false);

window.addEventListener("drop", (e) => {
  e = e || event;
  e.preventDefault();
}, false);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image_container">
  <img id="image-upload-preview" style="width:100%" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSClDjLZzrjD5FHPX-nNU5QoTWK-C2XcOD-M6Aabozw6Oem8-0ejje8Lk5DmNbhVOvvMfc&usqp=CAU">
  <div id="cropped_result"></div>
</div>