input只允许上传图片类型文件

2018-01-07编程教程
195

accept="image/*"
 
解决变慢的问题
 
 
input[file]标签的accept属性可用于指定上传文件的 MIME类型 。
 
例如,想要实现默认上传图片文件的代码,代码可如下:
 
<input type="file" name="file" class="element" accept="image/*">
效果如下图所示,默认过滤掉所有非图片文件:
 
但是这段代码在Chrome和Safari等Webkit浏览器下却出现了响应滞慢的问题,可能要等 6~10s 才能弹出文件选择对话框。简直不能忍呀。
 
在IE和Firefox中使用 accept=”image/*” 属性则没有发现响应延迟的问题。
 
于是几经尝试后,发现是 accept=”image/*” 属性的问题,删掉它或者将 * 通配符修改为指定的MIME类型,就可以解决Webkit浏览器下的对话框显示滞慢的问题。
 
解决办法如下:
 
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">

 
accept=”image/*”属性会对每一个文件都遍历一次所有的”image/*”文件类型,当文件较多时,文件的检验时间较长,这可能是Webkit的底层实现的bug。
 
另外,
 
accept=”audio/*”和 accept=”video/*” 属性 在 Webkit浏览器下也会有同样的响应延迟的问题。同理,通过将 * 通配符 修改成指定的MIME类型就可解决。
 
图片尽量不要加上svg
The End

相关推荐

百度UEditor编辑器如何禁止过滤div等网页html标签
将设计排版好的页面html代码上传到数据库,再读取出来的时候发现所有的div都被替换成了p标签。 解决方法: 首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代码,将true设置为false me.setOpt({ 'allowDivTransToP':false, 'disabledTableInTable'...
2022-11-23 编程教程
495

PHP错误Warning: Cannot modify header information - headers alr
今天在用php进行图片保存输出时候,图片一直显示错误,后面用调试模式下提示:Warning: Cannot modify header information - headers already sent by... 看了一些网上的方法也没解决,最后在php.ini配置output_buffering默认为4096就没有遇到这个错误了: o...
2022-05-18 编程教程
69

解析PHP中ob_start()函数的用法
ob_start()函数用于打开缓冲区,比如header()函数之前如果就有输出,包括回车/空格/换行/都会有Header had all ready send by的错误,这时可以先用ob_start()打开缓冲区PHP代码的数据块和echo()输出都会进入缓冲区而不会立刻输出.当然打开缓冲区的作用很多,只要...
2022-05-11 编程教程
106

PHP 随机用户名账号的生成
随机生成难点是在于如何避免碰撞,有人说用md5,GUID这些机制啊,当然可以,但是做为账号,看着有乱,而且生成位数也过长。 本方法只需要解决1秒内的并发碰撞就可以,因为固定头部采用的是unixtime时间,精确到秒,超过1秒,这个头部的时间肯定变化了。同时...
2020-03-27 编程教程
79

js代码实现调起微信客户端
此段代码只支持主流浏览器,一些浏览器可能会不支持,比如:百度 代码如下: function openWx(){ locatUrl = weixin://; if(/ipad|iphone|mac/i.test(navigator.userAgent)) { var ifr =document.createElement(iframe); ifr.src = locatUrl; ifr.style.disp...
2019-07-27 编程教程
503

js 如何验证字符串里是否包含汉字?
1、用正则表达式判断 input type=text id=name placeholder=请输入用户名 value= onblur=CheckChinese(name,this.value) class=form-control function CheckIsChinese(obj,val){ var reg = new RegExp([\\u4E00-\\u9FFF]+,g); if(reg.test(val)){alert(包含...
2019-05-30 编程教程
232