作者:杜甜甜Athena15 | 来源:互联网 | 2023-02-02 18:03
尝试在我正在开发的GoogleChrome扩展程序中上传文件时,我遇到了Mac上屏幕上显示的文件浏览对话框窗口的问题。有没有人知道如何重新定位对话框窗口或将文件上传附加到主窗口,以
尝试在我正在开发的Google Chrome扩展程序中上传文件时,我遇到了Mac上屏幕上显示的文件浏览对话框窗口的问题。 有没有人知道如何重新定位对话框窗口或将文件上传附加到主窗口,以便它与该窗口居中? 我按照这个问题来上传。 任何帮助赞赏! 谢谢!
我的manifest.json:
{ "manifest_version": 2, "name": "Bookmark and Binder", "description": "example", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "/index.html" }, "permissions": [ "activeTab", "COOKIEs", "http://example.com/" ] }
index.html的一小部分:
File Upload: Browse and Upload
在dom准备好了:
$('#uploadButton').on('click', function(){ chrome.runtime.sendMessage({ action: 'browseAndUpload' }); });
脚本的其余部分:
//background script /* Creates an `input[type="file]` */ var fileChooser = document.createElement('input'); fileChooser.type = 'file'; fileChooser.multiple = "multiple"; fileChooser.addEventListener('change', function () { var files = fileChooser.files; var formData = new FormData(); var inst = $.jstree.reference(newData.reference), obj = inst.get_node(newData.reference); var uploadURL = apiHost + '/binder/upload?location=' + obj.id; formData.append('location', obj.id); for (var i = 0; i
不幸的是,您无法在主窗口中显示对话框。 用户文件系统是敏感的,因此浏览器有几个安全措施来防止脚本式上传,这意味着没有肮脏的技巧。
所以我建议你选择一种不同的方法,即使从扩展程序弹出窗口上传文件也能提供良好的用户体验。
一种可能性是使用browserAction
弹出窗口作为文件的拖放区域。 实现它非常简单,就像我在这个小提琴中展示的那样:
HTML
DRAG YOUR FILES HERE
CSS
#file-container { border:2px dashed #aaa; background:#eee; position:relative; width:200px; text-align:center; padding:20px; border-radius:8px; font-family:sans-serif; } #file { position:absolute; opacity:0; background:magenta; top:0; left:0; right:0; bottom:0; }
这个小提琴是非常原始的,但如果你在index.html
抛出该代码,你会看到我的建议。 一个缺点是,为了正确地使用拖放概念进行文件输入,需要处理几个事件以便在选择一个或多个文件时提供视觉反馈。 幸运的是,有几个图书馆有这个目的; 一个好的是Dropzone.js 。
可悲的是,这不仅仅是一个直接的答案。 我希望这个解决方案能够很好地适应您的环境!
最后但同样重要的是,您描述的行为对我来说听起来像一个错误(可能是特定于OS X)。 随意向Chrome团队提交一个问题 ,以便他们可以告诉您这是否是一些有缺陷或丑陋的东西,即它是否是他们要修复的东西。
以上就是jQuery教程分享Chrome扩展文件上传浏览窗口位置关闭屏幕相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注(编程笔记)。