gpt4 book ai didi

javascript - 删除文件时无法检测到 chrome 扩展中的删除事件

转载 作者:可可西里 更新时间:2023-11-01 01:18:45 25 4
gpt4 key购买 nike

我正在构建一个 chrome 扩展,它允许用户拖放文件并将其保存到服务器。当我放下图像文件时,我从扩展程序中在页面中注入(inject)了一个 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');
});

list 文件

{
"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"
]
}

最佳答案

这是处理拖放的真正令人困惑的部分。您可能希望像处理 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);

关于javascript - 删除文件时无法检测到 chrome 扩展中的删除事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27361925/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com