当前位置: 首页 > Web前端 > HTML5

解决输入慢卡顿的问题[type=file]

时间:2023-04-05 16:23:50 HTML5

昨天上班前测试,问我为什么图片上传插件打开文件夹的速度这么慢,让我想办法优化一下,然后我努力起来了_(:з」∠)_因为我们内部系统不兼容ie,所以没管ie。在浏览器里玩,经过测试,发现safari、Firefox、Chrome(opera不知道为什么老闪退)在windows下没有卡顿问题,Firefox不卡顿,只有Chrome卡顿。不过这个插件是从别的项目借来的,加上限制图片类型的功能。原组件没有这个卡顿问题,所以问题可能只是在有限的图片类型上。先贴上我的代码image"disabled={disabled}/>于是决定先把accpet去掉试试……果然没有卡顿的问题。然后这个包在试accpet="image/jpg"果然不卡!!看起来问题出在“image/*”,但是写accpet的本意是过滤掉所有图片_(:з」∠)_,所以为了达到这个需求,提高用户体验,只能采用this._imgFile=c}onChange={this.handleChange.bind(this)}type="file"name="image"disabled={disabled}后枚举修改代码accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"/>再试一次,成功了!但是怎么这么卡??我查了一下万能的StackOverflow→_→它原来是因为Chrome的SafeBrowsing功能会在上传或保存的时候检查文件,如果Google的网络连接速度快一点就没有问题。但是如果连接很慢,或者干脆跪了,那么SafeBrowsing会让Chrome挂起一段时间,直到文件检查结束或者超时。使用accept="image/png,image/jpeg,image/gif"来解决这个问题,因为这些MIME类型在SafeBrowsing白名单中,不需要检查。但是如果你使用accept="image/*"之类的东西,它就不行了,而且可能会卡住。