安卓微信浏览器使用input file图片上传无法触发change事件

问题现象

项目中遇到一个上传图片的功能，使用了file作为选择上传，需要做图片预览等功能。在多方测试后没有问题，但在安卓微信浏览器中却发现change事件失效无法触发。

解决办法

由于在项目中我是用来上传图片，所以用了accept进行图片的类型限制，如下：

<input required="required" type="file" accept="image/png,image/jpeg,image/bmp" name="report" />

这样会使change事件失效，需要改为：

<input required="required" type="file" accept="image/*" name="report" />

如果需要图片类型验证，则在change事件中对file.type进行正则匹配，方法如下：

function checkImgType(file) {try {if (!(/image\/(jpeg|png|jpg|bmp)/.test(file.type))) {alert("请上传正确的图片类型");return false;}else {return true;}}catch(e) {return false;}
}

原因

猜测是安卓微信浏览器不支持accept属性进行列举匹配。如果有大佬知道具体原因可评论拍砖扔鞋子。感谢阅读！

安卓微信浏览器使用input file图片上传无法触发change事件相关推荐

安卓机 input file图片上传无反应解决方案
安卓机 input file 图片上传无反应解决方案: <input id="btnUpload" type="file" /> 加上以下三个属性就 ...
input file图片上传（使用OSS Javscrtipt 上传到服务器）以及图片裁剪（cropper.js）
一.图片上传 (1)使用 <input type="file" accept="image/*" name="file" @chang ...
fileUpload实现普通表单和file图片上传到数据库
fileUpload实现普通表单和file图片上传到数据库效果图: 实现 jsp:页面 servelt:控制器 service:逻辑操作 dao:数据库操作 domain:javaBean类首先需 ...
微信小程序如何把图片上传至服务器
微信小程序如何把图片上传至服务器前些日子接了个任务就是开发一个小程序,遇到了一个问题就是需要图片上传至服务器并保存记录,遵循着解决思路我们先从最开始入手 1:微信上传接口 2:服务器接收接口 3:保 ...
微信图片自动上传到服务器,微信小程序怎样使图片上传至服务器
这次给大家带来微信小程序怎样使图片上传至服务器,微信小程序使图片上传至服务器的注意事项有哪些,下面就是实战案例,一起来看一下.-wxml 发布项目 /**选择图片 */ choose: functio ...
ueditor单图片上传没有触发afterinsertimage事件
在一个开发过程中,想在图片上传后调用一些业务,在选择多图片上传的时候可以顺利调用,但是选择单图片上传的时候并不能调用到afterinsertimage事件在网上没能找到合适的解决办法,只能听着别人的 ...
base64转file图片上传
在微信公众号开发过程中,有可能会碰到这种情况,手写签字生成图片,或者页面生成图片等等,然后需求是将图片上传,一般上述情况都是由canvas转成的图片,格式都是base64类型的图片,而我们的上传接口一 ...
Ajax安卓成功iOS失败,api.ajax图片上传,ios可以上传成功,安卓上传失败
本帖最后由孤鹜恋落霞于 2019-4-10 18:02 编辑 function uploadImg(token, urlParams, imgSrc, callback) { var time = ...
微信小程序开发(二)图片上传
更新2017-08-24 更新七牛SDK只最新7.0.5版本. 在之前的博客<Node.js+express+MySQL使用七牛云实现的用户头像修改>,已经实现了在MUI框架或者< ...

安卓微信浏览器使用input file图片上传无法触发change事件

问题现象

解决办法

原因

安卓微信浏览器使用input file图片上传无法触发change事件相关推荐

最新文章

热门文章