gpt4 book ai didi

javascript - 通过 chrome 扩展将文件作为表单数据上传

转载 作者:行者123 更新时间:2023-12-02 23:09:33 25 4
gpt4 key购买 nike

我正在通过 chrome 扩展程序上传文件作为表单数据,我的代码如下。这里的问题是文件浏览窗口打开一秒钟然后就消失了。
此问题仅出现在 Mac 操作系统中。

ma​​nifest.json:

"background": {
"scripts": ["jszip.js", "background.js"]
},

背景.js:

chrome.runtime.onMessage.addListener(function (msg) {
if (msg.action === 'browse')
{
var myForm=document.createElement("FORM");
var myFile=document.createElement("INPUT");
myFile.type="file";
myFile.id="selectFile";
//myFile.onclick="openDialog()";
myForm.appendChild(myFile);
var myButton=document.createElement("INPUT");
myButton.name="submit";
myButton.type="submit";
myButton.value="Submit";
myForm.appendChild(myButton);
document.body.appendChild(myForm);
}
});

popup.js:

window.onload = function () {
chrome.runtime.sendMessage({
action: 'browse'
});
}

最佳答案

一点“背景故事”:

您想让用户从弹出窗口中选择并上传文件。但在 OSX 中,一旦文件选择器对话框打开,弹出窗口就会失去焦点并关闭,导致其 JS 上下文也被破坏。因此,对话框会立即打开和关闭。

这是known bug 在 MAC 上使用了一段时间。

<小时/>

解决方案:

您可以将对话框打开逻辑移至后台页面,该页面不受失去焦点的影响。从弹出窗口中,您可以向后台页面发送一条消息,请求启动浏览和上传过程(请参阅下面的示例代码)。

ma​​nifest.json

{
...
"background": {
"persistent": false,
"scripts": ["background.js"]
},

"browser_action": {
"default_title": "Test Extension",
// "default_icon": {
// "19": "img/icon19.png",
// "38": "img/icon38.png"
// },
"default_popup": "popup.html"
},

"permissions": [
"https://www.example.com/uploads"
// The above permission is needed for cross-domain XHR
]
}

popup.html

    ...
<script src="popup.js"></script>
</head>
<body>
<input type="button" id="button" value="Browse and Upload" />
...

popup.js

document.addEventListener('DOMContentLoaded', function () {
document.getElementById('button').addEventListener('click', function () {
chrome.runtime.sendMessage({ action: 'browseAndUpload' });
window.close();
});
});

背景.js

var uploadUrl = 'https://www.example.com/uploads';

/* Creates an `input[type="file]` */
var fileChooser = document.createElement('input');
fileChooser.type = 'file';
fileChooser.addEventListener('change', function () {
var file = fileChooser.files[0];
var formData = new FormData();
formData.append(file.name, file);

var xhr = new XMLHttpRequest();
xhr.open('POST', uploadUrl, true);
xhr.addEventListener('readystatechange', function (evt) {
console.log('ReadyState: ' + xhr.readyState,
'Status: ' + xhr.status);
});

xhr.send(formData);
form.reset(); // <-- Resets the input so we do get a `change` event,
// even if the user chooses the same file
});

/* Wrap it in a form for resetting */
var form = document.createElement('form');
form.appendChild(fileChooser);

/* Listen for messages from popup */
chrome.runtime.onMessage.addListener(function (msg) {
if (msg.action === 'browseAndUpload') {
fileChooser.click();
}
});
<小时/>

<子>注意:
作为安全预防措施,Chrome 将执行fileChooser.click()(如果是用户交互的结果)。
在上面的示例中,用户单击弹出窗口中的按钮,该按钮会向后台页面发送一条消息,后台页面会调用 fileChooser.click();。如果您尝试以编程方式调用它,它将无法工作。 (例如,在文档加载时调用它不会产生任何效果。)

关于javascript - 通过 chrome 扩展将文件作为表单数据上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21132971/

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