广告位联系
返回顶部
分享到

实现解决input[type=file]打开时慢、卡顿的问题

HTML/Xhtml 来源:互联网搜集 作者:酷站 发布时间:2018-08-26 14:50:54 人浏览
摘要

本篇文章给大家介绍实现解决input[type=file]打开时慢、卡顿的问题 为什么在input标签类型为file上传文件时在标签中设置属性 accpet=image/* ,打开本地文件夹的速度特别慢? 经过测试发现,在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有

本篇文章给大家介绍实现解决input[type=file]打开时慢、卡顿的问题


为什么在input标签类型为file上传文件时在标签中设置属性 accpet="image/*",打开本地文件夹的速度特别慢?经过测试发现,在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有卡顿问题,在windows里面,Firefox不卡顿,只有Chrome卡顿。

于是我决定先去掉accpet试试……果然就没有了卡顿的问题。那么本包在试试accpet="image/jpg"果然也不卡卡的了!!看来问题的所在就是"image/*",但是写accpet的原意是要想要筛选出所有图片_(:з」∠)_

那么为了实现这个需求,同时提高用户体验,只能采取枚举了

修改后的代码:
 

<input type ="file" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"/>

再试试,果然妥妥的了!


原来是因为Chrome的SafeBrowsing功能会在上传或保存时检查文件,


如果网络连接到google的速度比较快呢,就没有什么问题。


但是如果连接比较慢,或者干脆跪掉了,那SafeBrowsing就会让Chrome挂起一段时间,直到文件检查结束或者超时


使用accept="image/png, image/jpeg, image/gif"就可以解决这个问题,因为这些MIME类型在SafeBrowsing的白名单里面,不需要检查。


但是如果用像是accept="image/*"这样的呢,就不行了,就有可能变得卡卡的。

以上就是本篇文章的全部内容了,希望对大家有所帮助。

 


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章
  • HTML静态页面获取url参数和UserAgent的实现代码

    HTML静态页面获取url参数和UserAgent的实现代码
    接技术支持小伙伴信:有用户反馈app在华为设备上下载不了,以为是服务器覆盖的范围不够或服务器挂了,直到另一个客服同事发来一个录
  • html网页引入svg图片的4种方式总结
    web应用开发使用svg图片,总结了下,可以有如下4种方式: 1. 直接插入页面。 2. img标签引入。 3. css引入。 4. object标签引入。 1. 直接插入页
  • html中两种获取标签内的值的方法介绍
    获取标签中value的值 使用的javascript获取,所以肯定是包含在 script 标签里的,也需要引入jquery 标签示例: 1 input id=goodsCount type=text size=2 re
  • HTML基本元素标签介绍

    HTML基本元素标签介绍
    一、什么是HTML HTML(Hypertext Markup Language):即超文本标记语言,是一种用来设计网页的标记语言,用该语言编写的文件,以.html或.htm为后缀
  • HTML中的表格元素介绍

    HTML中的表格元素介绍
    表格元素的作用:用来格式化显示数据。 一、表格的基本结构 表格的基本语法: TABLE border=设置表格边框尺寸大小 width= cellpadding= cellspaning
  • HTML中的表单元素介绍

    HTML中的表单元素介绍
    表单元素概述 表单(Form),用于收集用户信息、提交用户请求等 处理过程 1、设计表单,并放入一些输入域 2、网站访问者在自己的计算机
  • HTML怎么设置下划线?html文字加下划线方法

    HTML怎么设置下划线?html文字加下划线方法
    HTML中的下划线曾经是将文本包含在u/u标签中的问题,但是这种方法已被放弃,而更倾向于使用更多功能的CSS。一般来说,下划线被认为是引
  • 关于HTML编码导致的乱码问题介绍

    关于HTML编码导致的乱码问题介绍
    今天一个学弟问了一个问题,它写的HTML代码打开显示的是乱码。 然后就给我发来了代码。 就一个HTML文件和一个文件夹,打开一看,很简单
  • 纯html+css实现Element loading效果的代码

    纯html+css实现Element loading效果的代码
    这是 Element UI loading 组件的效果图,看起来很酷,我们来实现一下! 分析 动画由两部分组成: 蓝色的弧线由点伸展成一个圆,又从圆收缩成
  • HTML+CSS实现导航条下拉菜单的代码

    HTML+CSS实现导航条下拉菜单的代码
    代码中的图片可以自己换的 下拉菜单HTML代码 header class=header div class=header_left img src=img/logo.jpg /div div class=header_right div class=number_right img src
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计