当删除文件时，无法在chrome扩展中检测到删除事件
当删除文件时，无法在chrome扩展中检测到删除事件
提问于 2014-12-09 00:04:09
我正在构建一个chrome扩展，它将允许用户拖放文件并保存到服务器上。通过这个扩展，我在页面中注入了一个div元素，当我放入一个图像文件时，浏览器会在整个页面上显示该图像。在扩展中没有检测到drop事件，但是如果我有一个类型为文件的输入元素，并且如果我将文件放在该元素上，那么就会检测到change事件。
不确定如何从扩展中检测drop事件。任何帮助都是非常感谢的。
contentScript.js文件
//building the Dropzone Div
var dropdiv = $("<div>", {
id :"sforce-dz-dropZone",
class : "sforce-dz-dropZonebg"
}).text('Add you\'re files here');
//injecting the drop div in the page
$("input[name=attachFile]").after(dropdiv);
//adding 'drop' event listener to the div.
//This is not getting logged at all.
$("#sforce-dz-dropZone").on('drop', function(e){
e.preventDefault();
e.stopPropagation();
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
console.log('the file name is '+ f.name);
}
});
//Adding another event. click, just to see if the events are getting triggered.
//When clicked on the div the console is logging the below string.
$("#sforce-dz-dropZone").on('click',function(){
console.log('clicked');
});清单文件
{
"name": "name",
"version": "0.0.1",
"manifest_version": 2,
"description": "text",
"author": "someone",
"content_scripts": [
{
"matches" : ["https://*.mysite.com/*"],
"js" : ["jquery.js","contentScript.js"],
"css" : ["sforce-dz.css"]
}
],
"permissions": [
"cookies",
"unlimitedStorage"
]
}回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-15 19:00:30
这是处理拖放的一个真正令人困惑的部分。你希望像click submit mouseOver一样只监听drop事件，但是除非它也有一个dragOver事件，否则它是不会工作的。
“如果没有dragOver事件处理程序，将使用dragOver事件的默认事件处理程序，因此不会触发drop事件。”Answer Here
最简单的工作示例
/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
// prevent default to allow drop
event.preventDefault();
});
document.addEventListener("drop", function( event ) {
// prevent default action (open as link for some elements)
event.preventDefault();
console.log('dropped');
});来自HTML5Rocks的工作示例
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);Stack Overflow用户
发布于 2014-12-12 00:19:38
dropdiv.on('dragover', function (e) {
return false;
});当鼠标在拖放区域上方时，你必须返回'false‘。
这种方法实现了对源的过滤。
我推荐你读一本David Flanagan写的书："JavaScript:权威指南“
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27361925
复制相关文章
相似问题