单击文件上传按钮后出现延迟?

2023-11-26

当我单击“选择要上传的文件”(即输入类型=文件)时,从单击按钮和选择文件到在按钮旁边显示所选文件之间存在延迟。浏览器是否正在尝试将文件加载到浏览器中?为什么有延迟。

接下来,我如何显示“请稍候..”消息立即地选择文件后。我尝试了各种 JQ 选项,似乎都是在初始延迟后触发的(正如我所说,可能是浏览器正在尝试加载不确定的文件)我想用加载器小部件/消息来覆盖延迟。

请帮忙。


方法是使用button到要触发的元素click on input type="file"兄弟姐妹Open File对话;将“正在加载”小部件附加到文档;利用.one()附上focus事件至$(window)删除“正在加载”小部件window恢复focus用户选择文件或关闭后Open File dialog.

$("button").click(function() {
  var spinner = $("<img />", {
    "id": "spinner",
    "src": "data:image/gif;charset=binary;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
});
  $(this).after(spinner).nextAll("input:first").click();
  $(window).one("focus", function() {
    $("#spinner").detach()
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>choose file</button>
<input type="file" style="opacity:0;"/>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

单击文件上传按钮后出现延迟? 的相关文章

  • 我可以用一个简单的函数制作一个迭代器吗? (没有生成器或 Symbol.iterator)

    我一直在尝试使用普通函数创建一个迭代器 而不使用生成器或使用Symbol iterator用于学术目的的协议 为此 我创建了一个函数 它返回一个带有next参数 但尝试将其作为iterable的论证for of循环会产生不需要的结果 这是到
  • TypeError:cli.init 不是 React Native 的函数

    在 MacBook Air M1 芯片中运行 npx react native init appName 时 TypeError cli init is not a function at run opt homebrew lib node
  • Bug 组合:jQuery 1.4、ajax/json、Firebug Lite 和 IE 8

    我刚刚得出结论 无论我如何尝试 jQuery 的 ajax 调用都无法在 IE 8 中处理 JSON 数据 我发现我可以使用 jQuery 1 3 2 库 这解决了问题 但 1 4 根本无法处理 JSON ajax 请求 即使返回的 JSO
  • 在each() 和forEach() 中使用break 和 continue

    如果我们不能使用 break 和 continue 关键字 我不确定我是否理解函数式循环 映射的价值 我可以做这个 collections users models forEach function item index can t use
  • Chrome 跨域 PATCH 请求不起作用

    我有一个带有 REST Api 的网站 现在我正在创建一个浏览器扩展 它将从某些页面收集数据并将它们发送回 REST Api 因为我希望我的扩展能够与 Firefox 和 Chrome 兼容 并且易于维护 所以我将实际代码作为脚本标记注入到
  • 在Javascript中将RGB数组转换为RGBA数组的快速方法

    我正在使用的模拟器在内部存储 RGB 值的一维帧缓冲区 但是 HTML5 画布在调用 putImageData 时使用 RGBA 值 为了显示帧缓冲区 我当前循环遍历 RGB 数组并以某种方式创建一个新的 RGBA 数组与此类似 https
  • 如何将OpenLayers多边形坐标转换为纬度和经度?

    我正在使用开放层 https openlayers org en latest examples draw freehand html绘制多边形并保存坐标的技术 这是我的代码 var raster new ol layer Tile sou
  • Lightbox:如何翻译“Image x of x”文本?

    我使用 Lightbox 2 作为图像集 当我的网站的访问者单击该集中的缩略图时 它将显示 图像的放大版本 下面是 描述 取自 a 标题属性 其下方 文本 Image x of x 例如 Image 1 of 12 有谁知道在哪里翻译 更改
  • 将屏幕宽度获取到 javascript 变量中并通过 ajax 将其发送到 php 页面以避免页面加载

    这是JS检测我的页面命名上的屏幕分辨率index html并将其发送到 php 以便可以使用以下方式检索值 GET 这是我的PHP文件命名的内容process php
  • Jquery 子元素发生变化

    我正在尝试使用 jquery 在子元素 在本例中为 select 更改时触发事件 这是我的 HTML div class row addForm div class col lg 2 col md 2 col sm 3 col xs 6 d
  • 带有桌子的嵌套表

    我在应用了表排序器的表中嵌套了表 它在嵌套表中添加了排序标题 但是它们没有对行进行排序 并且抛出了JavaScript错误 我想拥有 嵌套表不可排序 巢表上的排序实际上可以工作 但不是现状 您的第一个选择要容易得多 使嵌套表不可排序 像这样
  • 如何处理 setTimeout() 的多个实例?

    阻止创建 setTimeout 函数的多个实例 在 JavaScript 中 的最推荐 最佳方法是什么 一个例子 伪代码 function mouseClick moveDiv div 0001 mouseX mouseY function
  • Ajax 函数在重定向后不保存滚动位置

    正如标题所述 我编写了一个 ajax 函数 该函数应该滚动到用户在重定向之前所在的位置 我写了一个alert对于测试场景 它确实触发了 但滚动不断回到顶部 我在这里做错了什么 JavaScript ajax type GET url Adm
  • 如何使用转义的 unicode 解码字符串?

    我不确定这叫什么 所以我在搜索时遇到了麻烦 如何使用 unicode 解码字符串http u00253A u00252F u00252Fexample com to http example com使用 JavaScript 我试过unes
  • 如何使 4.X Typescript 项目与旧版本的 Typescript(如 3.X)兼容?

    如何使基于 TS 4 X 构建的软件包与 3 X 兼容 例如 如果我有较新的版本 则使用新功能 否则使用any or unknown或旧版本支持的任何内容 有没有可能使用指令 https www typescriptlang org doc
  • redux - 如何存储和更新键/值对

    我正在使用 redux 和 React js 我想存储简单的键 值对 但无法获得正确的减速器语法 在这种情况下 每个键 值对将保持与外部系统的连接 这是正确的做法吗 我刚开始使用 redux 所以这有点神秘 export default s
  • 除非打开开发人员工具,否则 IE8 Javascript 无法运行?

    由于某种原因 在 IE8 中 除非我在打开开发工具的情况下重新加载页面 否则 javascript 不会运行 我关闭开发人员工具并重新加载页面 然后 javascript 停止工作 我没有收到任何错误报告 无论如何它们也没有任何用处 还有其
  • 禁用移动设备上的锚点菜单点击

    我使用嵌套列表作为带有子菜单项的菜单 我曾经这样做过 如果您将鼠标悬停在主菜单项上 子菜单项将通过将显示从无更改为块来出现 我决定让子菜单看起来就像是下拉的 并使用了 CSS 过渡 我遇到的问题是 在第一种方法中 如果您触摸 iPad 上的
  • javascript从字符串创建不区分大小写的正则表达式

    我试图通过以不区分大小写的方式将输入与正则表达式匹配来进行验证 正则表达式作为对象上的字符串从服务中下来 我可能会得到类似的东西 regex ane 我可以执行以下操作 var rx new RegExp object regex The
  • 加载谷歌地图控件时是否有事件?

    我知道tilesloaded 但控件似乎在该事件之后加载 我基本上希望能够通过 jQuery 获取控件 但甚至找不到正确的监听 我也刚刚处理了 没有类似的事件 在控件可见之前空闲和tilesloaded触发 因此 基本上将 特殊控制 类添加

随机推荐

  • 如何在代码编辑器中禁用自动完成代码语句?

    每次我打字if然后按空格键 Delphi 完成它if True then和上面一个新的空行 有没有办法去除this 自动完成 功能或至少编辑它以不创建新行 来自工具 选项 编辑器选项 代码洞察菜单中 取消选择代码模板完成下的自动完成复选框
  • 如何以精确的时间(即 10 毫秒)定期运行 Erlang 进程

    我想每 10 毫秒运行一次定期的 erlang 进程 基于挂钟时间 10 毫秒应该尽可能准确 正确的实施方法应该是什么 如果您想要真正可靠和准确的定期过程 您应该依靠实际的挂钟时间使用erlang monotonic time 0 1 如果
  • 如何运行 test/a.py 形式的单元测试?

    是否可以实现一个具有如下文件结构的Python项目 myproj a py b py c py test a py b py c py Note in particular that the test scripts under test
  • Mongodb - 使用 addToSet 的项目计数

    我分组依据organization并使用 addToSet来展现与众不同的machineIds与此相关的organization 我想计算machineIds对于每个organization 然而 下面的代码返回所有的计数machineId
  • flutter查询firestore中的多个集合

    我正在玩 flutter 但我遇到了 firestore 的问题 我无法弄清楚 假设我想检索客户的购买者历史记录 并且我有一个如下所述的 Firestore 因此我有一个 用户 集合 其中包含以下文档user id然后在其中 我有一个 产品
  • Identity 2.1 - 未找到 UserId 但之前可以使用

    该代码之前多次工作 但在 Identity 2 1 中为用户添加几个新属性后 它突然停止工作 尽管在调试器中可以看到 UserId 的值 但我收到了 UserId not found 错误 任何人都知道为什么会突然发生这种情况 至少看到这一
  • 窗口卸载事件的本地存储

    我使用本地存储来存储一些数据 用户发出 ajax 请求来获取信息 我将结果存储在存储中 以便下次他请求相同的信息时 我首先在存储中查看它是否存在 现在我意识到 将数据保存在内存中的对象中 并在需要时循环该数据 而不是循环本地存储 实际上更有
  • Delphi 的 WebSocket 客户端实现

    Delphi 有免费的 WebSocket 客户端实现吗 我只找到了这个 WebSockets Delphi 组件 但它不是免费的 这是我的开源库 https github com andremussche DelphiWebsockets
  • Django 2.1 - 'functools.partial' 对象没有属性 '__name__'

    我最近将 Django 从 2 0 7 升级到 2 1 1 出现了一个新错误 其中出现此错误 functools partial object has no attribute name 我想了解我的修复是否正确以及是什么导致了这个新错误的
  • 对核心数据实体进行排序的最佳方法是什么?

    我有一个完全正常工作的核心数据模型 但是当我使用获取请求返回数据时 它的顺序看似随机 对这些数据进行排序的最佳方法是什么 是使用核心数据模型中的另一个表 然后 查询 第一个表吗 或者是将数据拉入数组中 然后以这种方式排序 我不太确定如何做其
  • ggplot 函数在图例下方添加文本

    在 R 中 我想创建一个函数 它接受 ggplot 对象和一些文本并返回 ggplot 对象 方法是在图例下方添加文本 在图的右侧 同时将图例保留在右侧 myplot ggplot iris aes x Sepal Length y Sep
  • 单一来源项目结构有哪些缺点?

    我是目前公司的新人 正在从事由我的直接团队领导编写的项目 该公司通常不使用 C 但我的同事用 C C 编写了高效的代码 只有我们知道如何用 C 编码 我和我的领导 所以没有第三种意见可以涉及 在我对这个项目有了足够的了解之后 我意识到整个结
  • 什么是无界数组?

    什么是无界数组 无界数组和动态分配数组有什么区别 与无界数组相关的常见操作有哪些 就像我们有堆栈数据结构的弹出和推送 无界数组可以 并且通常是 静态分配 实现无界数组时的主要关注点是提供类似动态数组的自由来在运行时决定数组大小 而不会因运行
  • 与序列化相比,使用 MarshalByRefObject 的成本有多高?

    在我的 Azure Web 角色代码中 我有一个CustomIdentity类派生自System Security Principal IIdentity 在某些时候 NET 运行时尝试序列化该类 and 序列化不起作用 试图解决我搜索了很
  • 为什么 range-for 找不到 std::istream_iterator 的 begin 和 end 重载?

    我有这样的代码 std ifstream file filename std ios base in if file good file imbue std locale std locale new delimeter tokens fo
  • 扩展此类以在列表视图中撤消/重做

    我正在使用第三方代码来管理 Windows 窗体项目中的撤消 重做操作 我需要扩展该类来管理列表视图中的撤消 重做操作 这意味着 撤消 重做添加 删除项目和子项目 撤消 重做检查 取消检查行 撤消 重做一些我可能错过的其他重要事情 我不知道
  • 环回模型中的动态属性或聚合函数

    我将如何在环回模型中使用聚合函数 如果我有一个由 mysql 数据库支持的模型 我是否可以让 Model1 与 Model2 具有 hasMany 关系 具有给定的数字属性 并在 Model1 中拥有一个从 Model2 获取该字段的 SU
  • 如何从 php 中的字符串中获取确定数量的单词?

    这就是我正在尝试做的事情 我有一段文本 我想从字符串中提取前 50 个单词 而不切断中间的单词 这就是为什么我更喜欢单词而不是字符 然后我可以使用 left 函数 我知道 str word count var 函数将返回字符串中的单词数 但
  • PL/SQL中如何查看变量的类型?

    PL SQL 中是否有函数可以显示变量的确切类型 例如 SQL 中的 DUMP 函数 我尝试过以下方法 DECLARE l variable INTEGER 1 BEGIN DBMS OUTPUT PUT LINE DUMP l varia
  • 单击文件上传按钮后出现延迟?

    当我单击 选择要上传的文件 即输入类型 文件 时 从单击按钮和选择文件到在按钮旁边显示所选文件之间存在延迟 浏览器是否正在尝试将文件加载到浏览器中 为什么有延迟 接下来 我如何显示 请稍候 消息立即地选择文件后 我尝试了各种 JQ 选项 似