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

Posted 2023-05-08

【中文标题】如何检测用户何时在浏览器当前选项卡视口中放置图像？

【英文标题】：how to detect when the user drop an image inside browser current tab viewport?

【发布时间】：2012-09-01 18:36:46

【问题描述】：

我想知道如何进行拖放图像上传。我不明白的是如何让服务器知道用户何时将图像拖放到某个 div 或主体以进行上传？是否支持在所有常见的浏览器中，即，ff，chrome，safari。谢谢你:)

【问题讨论】：

What have you tried?

服务器不会知道您在浏览器窗口中放置了一些东西。它是 javascript,html5 会检测到您在浏览器窗口中放置了一些东西并使用 ajax 通知服务器。跨度>

【参考方案1】：

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

简短的回答是，不。 所有主要浏览器都不支持检测用户何时将图像放到客户端窗口内的方法。

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

---

HTML5

这里是drag and drop from desktop to browser，使用 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>

---

jQuery

​​>

这是一个使用 JQuery（Firefox 和 Chrome）的drag and drop from desktop to browser

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

---

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

Is there a good jQuery Drag-and-drop file upload plugin? file upload via drag and drop jQuery Drag Image From Desktop Plugin Drag-n-Drop from Desktop jQuery Plugin Javascript for Drag file From desktop and drop into webpage jQuery File Upload Demo

【参考方案2】：

我正在使用Pupload。 我不必担心如何实现这种拖放行为，如果浏览器不兼容 html 5，它会优雅地降级。