我的manifest.json档案：

{
"manifest_version": 3,
"name": "上传类型提醒",
"version": "1.0",
"permissions": ["activeTab","webRequest","declarativeNetRequest"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["background.js"]
}
]
}

我的background.js档案：

document.addEventListener(\'change\', function(event) {
const input = event.target;
if (input.type === \'file\') {
const files = input.files;
for (let i = 0; i < files.length; i++) {
const fileName = files[i].name.toLowerCase();
if (fileName.endsWith(\'.bmp\') || fileName.endsWith(\'.png\') || fileName.endsWith(\'.gif\') || fileName.endsWith(\'.doc\') || fileName.endsWith(\'.docx\') || fileName.endsWith(\'.xls\') || fileName.endsWith(\'.xlsx\')) {
alert(\'此档案类型不允许上传：\' + files[i].name);
input.value = \'\'; // 清空文件输入
break;
}
}
}
});

我用Chrome浏览器扩充功能，点选载入未封装项目来载入这两个程式码但真正上传档案时只会跳出视窗「此档案类型不允许上传」提醒然后就继续上传那个档案

所以我想改成同样跳出视窗「此档案类型不允许上传」的提醒然后过三秒后直接关掉目前浏览的网页或是整个Chrome浏览器的关掉也可以我该如何改变我的代码

3 个回答

  • 旧至新
  • 新至旧
  • 最高Like数

2

纯真的人

iT邦大师 1 级 ‧ 2025-02-12 10:06:21

intput 的 type 为 file 型态

此句无效

input.value = \'\'; // 清空文件输入

你应该是要重新置换html元素才行吧~
例如这样~

HTML
<span id="UploadDp"><input type="file" id="UploadFile" name="UploadFile"></span>

JS
UploadDp.innerHTML = "<input type=\\"file\\" id=\\"UploadFile\\" name=\\"UploadFile\\">";

浏览器关掉的程式码 (但是通常会跳出提醒访客，浏览器是否关闭的询问)

window.close();

2

Gary

iT邦好手 1 级 ‧ 2025-02-12 11:22:38

content.js
这段程式码会拦截 的选择，并在侦测到被封锁的档案后：

  1. 弹出警告
  2. 清除选取的档案
  3. 延迟 3 秒后关闭网页

document.addEventListener("change", function (event) {
if (event.target.tagName.toLowerCase() === "input" && event.target.type === "file") {
const forbiddenExtensions = [".bmp", ".png"];
const files = event.target.files;
let hasForbiddenFile = false;
for (let file of files) {
let ext = file.name.slice(file.name.lastIndexOf(".")).toLowerCase();
if (forbiddenExtensions.includes(ext)) {
hasForbiddenFile = true;
break;
}
}
if (hasForbiddenFile) {
alert("禁止上传该类型的档案！3 秒后关闭网页！");
event.target.value = ""; // 清空选取的档案
setTimeout(() => {
window.close(); // 关闭当前网页
}, 3000);
}
}
});

可以试试

0

YC

iT邦好手 1 级 ‧ 2025-02-13 09:55:56

建议换个思路，只允许特定类型档案。

加上 accept 指定只接收的类型。不就可以阻挡选取非预期档案了吗？

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />

我没写过 Chrome 扩充。不过一般 javascript 逻辑如下

document.querySelectorAll("input[type=file]").forEach(el=>{el.setAttribute(\'accept\', \'text/plain\')})

将 text/plain 换成需要接受的MIME