Javascript 如何检测用户何时将图像放入浏览器当前选项卡视口中？

我想知道如何进行拖放图像上传。我不明白的是，当用户将图像上传到某个div或body中进行上传时，如何让服务器知道？这在所有常见的浏览器ie、ff、chrome、safari中都支持吗。谢谢：）

我可以告诉你，你没有做太多的研究

简言之，答案是否定的。在所有主流浏览器中都不支持检测用户何时将图像放入客户端窗口的方法

此外，正如Rajat Saxena在评论中指出的那样，您必须通过发送关于删除事件的ajax请求来通知服务器文件删除

---

HTML5 下面是使用HTML5和javascript

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

---

插件（未测试）的其他相关链接和问题

我正在用它。

---

我不必担心如何实现这种拖放行为，如果浏览器与html 5不兼容，这种行为会优雅地降级。
服务器不会知道您在浏览器窗口中拖放了什么。它是javascript，html5，它会检测到您在浏览器窗口中丢了什么，并使用ajax通知服务器。

function ignoreDrag(e) {
  e.originalEvent.stopPropagation();
  e.originalEvent.preventDefault();
}

$('#target')
    .bind('dragenter', ignoreDrag)
    .bind('dragover', ignoreDrag);
    .bind('drop', drop);

function drop(e) {
  ignoreDrag(e);
  var dt = e.originalEvent.dataTransfer;
  var files = dt.files;

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