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

最新推荐文章于 2023-05-10 17:10:46 发布
最新推荐文章于 2023-05-10 17:10:46 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： javascript 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38036198/article/details/105240102
版权
在安卓微信浏览器中，使用input file上传图片时，change事件无法触发。原因是accept属性限制图片类型可能导致该问题。解决办法是移除accept属性，改为在change事件内部通过file.type进行图片类型的正则匹配验证。
摘要由CSDN通过智能技术生成

问题现象

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

解决办法

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

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

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

<input required
最低0.47元/天 解锁文章
明明很开心_l
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js input[type=file]选择重复的文件，无法触发change事件
PrimaryColor
03-01 2124
选择文件的时候，浏览器会判断是否跟之前一致，如果一致他就不会重新加载这个文件，避免无谓的加载消耗。所以我们在不一样的需求的时候，比如裁剪图片，无论他是不是相同图片，都必须让他触发change事件，这样才能进行下一步处理。 解决方法：给input添加原生事件onblur进行清空，onblur="this.value=''"，blur比change事件的优先级要高一点。 代码： <inputtype="file"accept="image/*"onblur="this.value=''"...
安卓版微信 input onchange事件不生效
nabywe的博客
01-15 6433
做Vue 图片上传控件，遇到无法上传的问题，表现未选择图片后无法触发change事，问题原因最终锁定在input accept上。 上面的定义，在某些安卓版微信上不会触发change事件，需要改成下面形式 困扰了很久
input框type=file上传文件的时候不触发change事件的问题
空空壹的博客
07-27 1721
今天上传文件遇到了传图片的时候连续选择同一张图片不会触发change事件的问题，去网上搜了一下比较容易的方法是吧 file的值清空 然后试了以下方法： html： <input type="file" id="file_new_item" name="file_new_item"> 第一种解决方法： $("#file_new_item").val(''); 在chrome上试了一下，这样就行了可以触发change事件了，虽然type=file不能修改值 但是可以赋值空 然而我们.
vue - 解决input上传文件选择同一文件时change事件不会触发的问题
qq_43886365的博客
09-06 4662
js - 解决使用input上传文件选择同一文件时change事件不会触发的问题
安卓微信浏览器无法触发onchange事件
ccsdn的博客
12-27 2468
部分安卓微信浏览器无法触发onchange事件 这其实安卓微信的一个遗留问题。 解决办法也很简单： input标签  &lt;input type=“file" name="image" accept="image/gif, image/jpeg, image/png”&gt; 要写成 &lt;input type="file" name="image" accept=“image/*”...
Vue触发input选取文件点击事件操作
10-14
总的来说，Vue.js中的文件上传操作可以通过监听按钮点击事件触发input元素的文件选择对话框，然后通过`FileReader`处理选中的文件。同时，Vue的懒加载机制可以提高大型应用的性能，确保用户只加载他们需要的模块。
input file上传 图片预览功能实例代码
09-01
以上就是关于`<input type="file">` 上传图片预览功能的实现原理和实例代码解析。这个功能不仅简化了用户的操作流程，也提高了网页的交互性。在实际开发中，还可以根据需要添加更多细节，如错误处理、图片大小限制...
解决vue项目中type=”file“ change事件只执行一次的问题
08-27
这是因为 input[type="file"] 元素的 change 事件只会在文件选择改变时触发，而不是在文件上传完成时触发。 在 Vue 项目中，我们可以使用 v-if 指令来解决这个问题。我们可以添加一个小的开关 ishowFile，将 input...
input file上传图片预览
12-30
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
关于WIN10 input type="file"无法触发change问题
qq_37067705的博客
07-14 1173
一般逻辑，显示一个按钮，click事件触发input type="file"弹出，input type="file"绑定change事件，但是发现当file上面添加display:none时，打死都触发不了change事件，后来强行把input隐藏掉，就好了，当前环境：WIN10（非常不错的系统--我去年买了个表，点了上传，要等半天才弹出文件上传框，除非用flash）。
input 上传图片显示预览、调用摄像头，ios和Android的兼容性解决
qq_39430589的博客
10-24 7229
input type="file" id="camera" multiple="multiple"capture="camera" accept="image/*" > $(function () { //解决上传图片时capture="camera"在安卓与IOS的兼容性问题（在IOS只能拍照，不能选相册） var ua = navigator.userAgent.toLower
input上传在小米和华为手机碰到的问题
soslsboy的博客
12-24 2634
input上传文件的时候，accept限制了详细的上传条件，例如："image/png,image/jpg"，这样详细的限制后，小米和华为手机上传图片的时候会出现只能选择部分图片上传或者无法选择图片上传的问题，把限制条件改为"image/*"就不会出现无法上传的问题。...
H5移动端安卓机input上传附件点击无反应问题及其他安卓与webview兼容性问题、
qq_45108245的博客
01-09 8530
H5移动端安卓机input上传附件点击无反应问题及其他安卓兼容性问题一、问题二、查找原因 一、问题 最近在赶项目的时候，做了H5并嵌入webview中。发现点击H5中 input type=“file” 标签 不能打开android资源管理器。 // An highlighted block <input type="file" accept="image/*;capture=camera">， IOS手机中，可以直接呼起相机和相册； 安卓手机则不行，部分浏览器没问题； 二、查找原因 网上一查
安卓WebView文件上传的实现（解决安卓WebView中＜input type=‘file‘/＞标签点击没反应）
sdxjwkq01的博客
04-03 8764
网页端上传文件常用<input type='file'/>标签，放上这个标签，浏览器就会出现这个文件选择器，点击就可以弹出文件选择窗口，很是简单方便，不过，包含<input type='file'/>标签的网页要是在安卓WebView中渲染，<input type='file'/>这个标签就会失效，用户点击后毫无反应，根本原因就是安卓WebView没有实现具体的文件选择器方法，对应的方法是空的，我们要安卓WebView支持<input type='file'/&gt
INPUT[type=file]的change事件不触发问题
weixin_34405332的博客
08-07 2004
在网页上要操作文件通常会使用INPUT[type=file]控件，但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件，只是让上面的文字改变，而这个改变可能会触发change事件而已。对于文字没改变的选择，change事件则不会触发。　　当INPUT[type=file]控件上已经选择过一次文件之后，再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和...
使用input上传文件 change事件只能执行一次的问题解决
最新发布
你的阿迁
05-10 595
由于一直选择的是同一个文件，不能够让change事件的event.target.value发生改变，导致选择文件后，不会再次触发change事件。一开始我选择在change事件的回调函数中，对文件的内容进行置空，由于还需要对已上传的文件进行查看，导致获取不到所选择的文件数据，我又重新在关闭弹层的时候，通过ref将内容置空。关闭弹层后，再次选择文件时（由于当时在测试，一直选择的都是同一个文件），input的change事件不执行，弹层也就顺理成章地打开不了。点击批量上传按钮，选择文件后，弹层正常显示。
部分安卓微信浏览器无法触发onchange事件
weixin_30746117的博客
06-06 600
这是安卓微信的一个遗留问题。 解决办法很简单： 将input标签 <input type=“file" name="image" accept="image/gif, image/jpeg, image/png”> 写成 <input type="file" name="image" accept=“image/*”> 即可解决。 转载于:https://ww...
input change事件选择相同文件不生效
zhaoq6的博客
06-17 1160
input change选择相同文件不生效 场景描述 <input type="file" style="" ref="fileBtn" name="" id="choose_local" @change="handlechangeGetLocalfile(node,$event)" /> 项目需要使用input上传文件，选用change事件触发上传文件，当两次选择相同文件的时候发现change事件没有触发 解决方法 选择相同文件不生效，因此上传完成后把input的value值置空，具体代
h5页面上传图片后没有出发input的change事件
04-08
这可能是因为你的代码中没有正确监听 input 元素的 change 事件。你可以检查一下代码中是否有以下类似的代码： ``` document.querySelector('input[type="file"]').addEventListener('change', function() { // 处理图片上传 }); ``` 如果没有这样的代码，就需要添加上去。如果已经有这样的代码，但仍然没有触发 change 事件，可以检查一下 input 元素的 ID 或 class 是否正确，以及是否有其他的 JS 代码阻止了事件的传播。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值