热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jQuery教程分享Chrome扩展文件上传浏览窗口位置关闭屏幕

尝试在我正在开发的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的一小部分:

 

在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教程关注(编程笔记)。


      推荐阅读
      • 图像因存在错误而无法显示 ... [详细]
      • SpringMVC接收请求参数的方式总结
        本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
      • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
      • 用ESP32与Python实现物联网(IoT)火焰检测报警系统
        下图是本案例除硬件连线外的3步导学开发过程,每个步骤中实现的功能请参考图中的说明。在硬件连线完成之后我们建议您先使用“一分钟上云体验”功能预先体验本案例的实际运行效果 ... [详细]
      • Java大文件HTTP断点续传到服务器该怎么做?
        最近由于笔者所在的研发集团产品需要,需要支持高性能的大文件http上传,并且要求支持http断点续传。这里在简要归纳一下,方便记忆 ... [详细]
      • 原文转自:http:blog.csdn.netchinasoftosgarticledetails7903045UploadAction.java:packagecr ... [详细]
      • 这是原文链接:sendingformdata许多情况下,我们使用表单发送数据到服务器。服务器处理数据并返回响应给用户。这看起来很简单,但是 ... [详细]
      • t-io 2.0.0发布-法网天眼第一版的回顾和更新说明
        本文回顾了t-io 1.x版本的工程结构和性能数据,并介绍了t-io在码云上的成绩和用户反馈。同时,还提到了@openSeLi同学发布的t-io 30W长连接并发压力测试报告。最后,详细介绍了t-io 2.0.0版本的更新内容,包括更简洁的使用方式和内置的httpsession功能。 ... [详细]
      • [大整数乘法] java代码实现
        本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
      • 本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ... [详细]
      • 本文介绍了使用cacti监控mssql 2005运行资源情况的操作步骤,包括安装必要的工具和驱动,测试mssql的连接,配置监控脚本等。通过php连接mssql来获取SQL 2005性能计算器的值,实现对mssql的监控。详细的操作步骤和代码请参考附件。 ... [详细]
      • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
      • 在tp5项目中引入ueditor编辑器并实例化后插入图片出现目录创建失败问题在查看网络上各种解决方案之后总结如下:根据官网提示主要是因为图片保存的路径无权限导致,官方文档链接:ht ... [详细]
      • 校园表白墙微信小程序,校园小情书、告白墙、论坛,大学表白墙搭建教程
        小程序的名字必须和你微信注册的名称一模一样在后台注册好小程序。mp.wx-union.cn后台域名https。mp.wx-union.cn ... [详细]
      • android listview OnItemClickListener失效原因
        最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
      author-avatar
      杜甜甜Athena15
      这个家伙很懒,什么也没留下!
      PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
      Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有