禁止將文件系統映像拖放到瀏覽器中。

Question

我正在試驗HTML5文件API。不過，我注意到，如果將圖像拖到瀏覽器中，瀏覽器會顯示圖像的默認行爲。但是，如果您的目標是上傳圖像而不是查看圖像，這可能會令人討厭。

我想知道是否有防止這種行爲的方法？我已經嘗試了onPropagation/preventDefault on ondrop事件，但是在某種程度上起作用，但是留下了「放置」光標，給人的印象是圖像可以放在頁面的任何位置。

理想情況下，您只會看到指定區域的「拖放」光標，圖像意味着被放置。

Answer 1

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/ - 只允許放置到矩形。

Answer 2

也許這是你在找什麼？我自己設計了這個。

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