7

我正在试验 HTML5 文件 API。但是，我注意到浏览器具有默认行为，如果您将图像拖到浏览器中，它们会显示图像。但是，如果您的目标是上传图像而不是查看图像，这可能会很烦人。

我想知道是否有办法防止这种行为？我已经在 ondrop 事件上尝试了 stopPropagation / preventDefault ，这在一定程度上起作用，但是将“放置”光标留在原处，给人的印象是图像可以放置在页面上的任何位置。

理想情况下，您只会在要删除图像的指定区域上看到“放置”光标。

4

2 回答 2

14

dataTransfer 对象具有 dropEffect 和 effectAllowed 属性。不完全确定它们之间的区别，但将两者都设置为“无”应该会有所帮助。

$(document).bind({
   dragenter: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.originalEvent.dataTransfer;
     dt.effectAllowed = dt.dropEffect = 'none';
   },
   dragover: function (e) {
      e.stopPropagation();
      e.preventDefault();
      var dt = e.originalEvent.dataTransfer;
      dt.effectAllowed = dt.dropEffect = 'none';
   }
});

请参阅http://jsfiddle.net/andreymir/H3RR7/embedded/result/ - 仅允许拖放到矩形。

于 2011-09-13T03:52:38.100 回答
0

也许这就是你要找的？这是我自己设计的。

http://rightandrong.info/html5upload/Upload.html

于 2011-09-13T00:37:36.717 回答