关于WIN10 input type="file"无法触发change问题

最新推荐文章于 2022-04-03 15:55:10 发布
最新推荐文章于 2022-04-03 15:55:10 发布
阅读量1.1k 收藏
点赞数
分类专栏： WEB前端 文章标签： 文件上传 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37067705/article/details/75123595
版权

一般逻辑，显示一个按钮，click事件触发input type="file"弹出，input type="file"绑定change事件，但是发现当file上面添加display:none时，打死都触发不了change事件，后来强行把input隐藏掉，就好了，当前环境：WIN10（非常不错的系统--我去年买了个表，点了上传，要等半天才弹出文件上传框，除非用flash）。





coder之家
关注
专栏目录
安卓微信浏览器使用input file图片上传无法触发change事件
“明明很开心”的博客空间
04-01 2369
问题现象 项目中遇到一个上传图片的功能，使用了file作为选择上传，需要做图片预览等功能。在多方测试后没有问题，但在安卓微信浏览器中却发现change事件失效无法触发。 解决办法 由于在项目中我是用来上传图片，所以用了accept进行图片的类型限制，如下： <input required="required" type="file" accept="image/png,image/jpeg,...
js input[type=file]选择重复的文件，无法触发change事件
PrimaryColor
03-01 2169
选择文件的时候，浏览器会判断是否跟之前一致，如果一致他就不会重新加载这个文件，避免无谓的加载消耗。所以我们在不一样的需求的时候，比如裁剪图片，无论他是不是相同图片，都必须让他触发change事件，这样才能进行下一步处理。 解决方法：给input添加原生事件onblur进行清空，onblur="this.value=''"，blur比change事件的优先级要高一点。 代码： <inputtype="file"accept="image/*"onblur="this.value=''"...
INPUT[type=file]的change事件不触发问题
极客神殿
08-16 7776
在网页上要操作文件通常会使用INPUT[type=file]控件，但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件，只是让上面的文字改变，而这个改变可能会触发change事件而已。对于文字没改变的选择，change事件则不会触发。 当INPUT[type=file]控件上已经选择过一次文件之后，再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和第一次是一样的，没有改变。还有个更蛋疼情况是有些浏览器会自动记住控件上的文字，即使页面关闭后重新打开还是会恢复到原
input框type=file上传文件的时候不触发change事件的问题
空空壹的博客
07-27 1825
今天上传文件遇到了传图片的时候连续选择同一张图片不会触发change事件的问题，去网上搜了一下比较容易的方法是吧 file的值清空 然后试了以下方法： html： <input type="file" id="file_new_item" name="file_new_item"> 第一种解决方法： $("#file_new_item").val(''); 在chrome上试了一下，这样就行了可以触发change事件了，虽然type=file不能修改值 但是可以赋值空 然而我们.
ng-change 在input type=file时失效的解决办法
renkind的博客
10-31 3293
JS:- $scope.uploadImage = function () { console.log("Changed"); } HTML:-
解决vue项目中type=”file“ change事件只执行一次的问题
08-27
这是因为 input[type="file"] 元素的 change 事件只会在文件选择改变时触发，而不是在文件上传完成时触发。 在 Vue 项目中，我们可以使用 v-if 指令来解决这个问题。我们可以添加一个小的开关 ishowFile，将 input...
input type=file 选择图片并且实现预览效果的实例
08-29
input type=file 选择图片并且实现预览效果的实例 本文将为大家带来一个input type=file 选择图片并且实现预览效果的实例。这个实例使用了HTML、CSS和JavaScript来实现图片上传和预览的功能。 首先，让我们看看...
关于type="file"的input框样式修改小结
09-28
在前端开发中，`<input type="file">` 是一种常用的HTML元素，用于让用户选择本地文件进行...在实际项目中，合理地运用这些工具和技术，可以有效解决 `input[type="file"]` 样式统一的问题，提高前端开发的效率和质量。
vue中使用input[type="file"]实现文件上传功能
10-18
综上所述，Vue中使用`input[type="file"]`实现文件上传功能是一个涉及前端多种技术的综合性任务，它不仅包括对Vue指令和事件处理的运用，还可能涉及到对第三方库的集成和对安全性的考虑。通过实践这个功能，可以深入...
关于<input type="file" >浏览器兼容问题
weixin_30267697的博客
11-16 277
最近在做上传文件前端的 jQuery，遇到浏览器兼容问题，上网查了一下看到网友总结很到位，具体如下： 解决思路是这样子的：1、首先把input=file做成透明来隐藏2、要明确一点：用其它按钮的click时间来触发input=file时间是不可能的，一定会拒绝访问3、input=file必须被主动触发，而不是由Js函数来被动click4、唯一的办法：点击你的submit按钮，而实际上点的是inp...
input type=‘file‘ 上传同一个文件失效，无反应
Crazy_GirlLL的博客
12-01 1360
input type='file' 上传同一个文件失效，无反应 用inputfile上传文件，掉用onchange方法时，多次上传同一个文件时功能失效，不会发送ajax请求 input[type=file]使用的是onchange去做，onchange监听的为input的value值，只有再内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，你只需要在上传成功的回调里面，将当前input的value值置空即可。event.target.value=“”； 设为空之后...
input的type=file触发的相关事件
热门推荐
现在学习也不晚
07-30 9万+
今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与input相关的事件运行的过程。添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。 我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input
安卓WebView文件上传的实现（解决安卓WebView中＜input type=‘file‘/＞标签点击没反应）
sdxjwkq01的博客
04-03 8938
网页端上传文件常用<input type='file'/>标签，放上这个标签，浏览器就会出现这个文件选择器，点击就可以弹出文件选择窗口，很是简单方便，不过，包含<input type='file'/>标签的网页要是在安卓WebView中渲染，<input type='file'/>这个标签就会失效，用户点击后毫无反应，根本原因就是安卓WebView没有实现具体的文件选择器方法，对应的方法是空的，我们要安卓WebView支持<input type='file'/&gt
关于IE9下用按钮触发file上传控件，请求无法触发的问题
x1172031988的专栏
04-12 6175
很多系统为了美观，都会在网页中用一个隐藏的按钮触发file上传控件，一般正常的在Chrome和Firefox下没有问题，但是切换到IE9和IE10下请求无法到达后台，这是因为IE9和IE10为了安全考虑，阻止了不是直接点击file的上传。因为这个问题，折腾了一天，参考网上的案例，结合自己的实际情况，终于找到一个比较靠谱的解决方案。 用一个label标签，label的for属性指向file文本框
ie下onchange事件触发不到
隐0士的博客
08-24 7129
在项目中用到checkbox时，想实现checkbox选中和不选中时触发事件，绑定了onchange事件，在火狐下当值改变时，会触发这个事件，但是在ie下却不会，是在失去焦点后，才会触发这个事件，在丢失焦点时才触发，那其实就基本等同于onblur事件了。于是上网找了一下其他的时间，最后得出的结论是，如果还要用onchange时间，那就根据浏览器类型判断 ，如果是ie则绑定onpropertycha
input type=file, 时，onChange事件不触发问题
yw_hard的博客
04-17 1万+
React中input type=file, 时，onChange事件不触发问题当选择图片相同的时候，不会触发onchange事件， 当选择图片相同的时候，不会触发onchange事件， 最近在做react项目时发现的问题，代码如下 // An highlighted block <input type="file" onClick={(e) =>{e.target.value = '...
vue input type=file清空文件
最新发布
09-10
在Vue中，如果你想要实现一个`<input type="file">`元素清空已选择的文件，可以使用JavaScript来操作DOM元素或者利用Vue的绑定功能。以下是一个实现清空文件输入的示例方法： ```javascript // 假设你的<input>元素有一个ref属性，例如：ref="fileInput" // 你可以通过以下方式来清空文件输入 this.$refs.fileInput.value = null; ``` 这里，`this.$refs.fileInput`是Vue模板中`<input type="file">`元素的引用。将其`value`属性设置为`null`会清空当前选择的文件。值得注意的是，不同的浏览器对这种方式的支持可能不同，有些浏览器可能不允许直接通过JavaScript清空文件输入的值。 另外，你也可以通过其他方法实现清空，比如在`<input>`元素上绑定一个事件，当触发该事件时，使用JavaScript清空输入框的值： ```html <input type="file" @change="clearFileInput"> ``` ```javascript methods: { clearFileInput() { this.$refs.fileInput.value = null; } } ``` 在这个例子中，当文件输入的值发生变化时，`clearFileInput`方法会被调用，进而清空文件输入的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值