上传文件，oninput方法在IE Edge上方法无法被触发，要使用onchange

最新推荐文章于 2024-10-31 20:23:05 发布
最新推荐文章于 2024-10-31 20:23:05 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端开发 文章标签： input upload ie edge 兼容性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunnyboysix/article/details/107915591
版权
本文探讨了在兼容IE和Edge浏览器时，使用不同事件处理文件上传的问题。详细介绍了oninput与onchange事件的区别，指出在360极速浏览器和Edge中，onchange事件更为可靠，尤其是在Vue框架中。
摘要由CSDN通过智能技术生成

遇到一个很有意思的bug就是我们上传文件一般会使用input

因为业务需要兼容ie edge, 就出现了点击文件上传选择了文件以后但是页面没有任何反应。

先解释一下，oninput方法是元素获取用户输入时触发。

onchange该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)

谷歌

IE11

IE Edge

使用oninput

使用onchange

除了edge  在360极速浏览器好像也是无法获取的，所以建议尽量用onchange  

如果是在vue中使用则写 @change

<input  type="file" :accept="acceptExt" @change="upload"/>

 

 

加油  ！！！！！！！！！

安卓WebView文件上传的实现（解决安卓WebView中＜input type=‘file‘/＞标签点击没反应）
sdxjwkq01的博客
04-03 9156
网页端上传文件常用<input type='file'/>标签，放上这个标签，浏览器就会出现这个文件选择器，点击就可以弹出文件选择窗口，很是简单方便，不过，包含<input type='file'/>标签的网页要是在安卓WebView中渲染，<input type='file'/>这个标签就会失效，用户点击后毫无反应，根本原因就是安卓WebView没有实现具体的文件选择器方法，对应的方法是空的，我们要安卓WebView支持<input type='file'/&gt
input[type='file']获取上传文件路径案例
ddr66288的博客
06-09 8036
最近在项目时，需要获取用户的上传文件的路径，便写了一个demo： <body> <input type="file" name="" value=""> <script> var input = document.getElementsByTagName("input")[0]; console.log(inp...
html oninput的作用,html范围滑块 - oninput在IE 11中不起作用
weixin_39747807的博客
06-23 265
我已经实现了一个范围滑块,它使用该值从数组中获取元素并显示该元素,而不是显示范围值.它适用于Chrome和Firefox但不适用于IE 11 - 当滑块移动时,该值不会获得更新的元素.HTML:type="range"min=1max=10value=0id="fader"step=1oninput="outputUpdate(years[value])">1908使用Javascript...
ElSelect 组件的 onChange 和 onInput 事件的区别
最新发布
weixin_52648900的博客
10-31 937
在ElSelect组件中，onInput 和onChange都是用于监听用户选择内容的事件，简要区别在于触发时机和适用场景不同，但需要注意的是，二者挂载位置不同，这个很重要。
chrome input上传file无响应
qq_30923243的博客
02-22 3159
Chrome浏览器上传文件无响应可能是因为搜狗输入法版本太低了。 上传文件前将输入法切换就好了。 （在哪看到的已经忘记了，大神对号入座吧）
Chrome 浏览器上传文件无响应
qq_42122972的博客
08-20 9569
Chrome 浏览器与搜狗输入法有冲突，在上传文件的时候切换到非搜狗输入法模式下
input type=‘file‘ 上传同一个文件失效，无反应
Crazy_GirlLL的博客
12-01 1397
input type='file' 上传同一个文件失效，无反应 用inputfile上传文件，掉用onchange方法时，多次上传同一个文件时功能失效，不会发送ajax请求 input[type=file]使用的是onchange去做，onchange监听的为input的value值，只有再内容发生改变的时候去触发，而value在上传文件的时候保存的是文件的内容，你只需要在上传成功的回调里面，将当前input的value值置空即可。event.target.value=“”； 设为空之后...
JavaScript 使用input type=“file“ 无法上传相同文件的问题
buyue
01-04 1763
使用<input type = "file">标签上传文件时，若两次上传的是同一个文件，查看浏览器网络面板发现没有出发网络请求。 【问题原因】 两次上传同一个文件时，的value是一样的，所以不会触发onchagne事件。 【解决方案】 每次上传完成后，将所需信息保存，再将input的value值进行清空。 document.getElementById('the_inputfile').value = ''; 或者重新赋值 var the_inputfile = document.getE
基于layui.upload.js 拖拽文件/文件夹上传下载
camel_gold的博客
05-16 2537
layui.upload.js 拖拽文件/文件夹上传下载
AJAX 拦截器/FormData文件上传/XMLHttpRequest
FellAsleep的博客
01-11 450
1.axios拦截器 拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。 1.1 使用拦截器实现loading效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
前端文件预览插件和库的使用：简化开发的工具选择指南
同时，通过分析多种文件预览插件的实际应用案例，本文提供了在图片、文档、视频和音频文件预览中选择和应用不同插件的见解。进一步地，本文提供了构建自定义文件预览插件的详细指南，涵盖开发前的准备、开发流程及...
JS DOM的使用
weixin_52142992的博客
11-23 528
DOM的使用: 区分原生js和jquery用法
IE下onpropertychange与firefox下oninput用法
cool_rain_man的专栏
04-02 4112
 onpropertychange能够捕获每次输入值的变化。例如：对象的value值被改变时，onpropertychange能够捕获每次改变，而onchange需要执行某个事件才可以捕获。onpropertychange 不被firefox所支持，如果想在firefox下正常使用,需要用oninput属性,且需要用addEventListener来注册事件。例子：oninput测试 
修复IE9下oninput事件(原生，jq)
u013328563的博客
09-17 3046
IE9下虽然有oninput事件，但是这个input事件只是个半成品，它无法响应删除（Backspace，Del，右键菜单删除，右键菜单剪切）。 而且最奇葩的是 IE8下可以响应删除的propertychange事件，在IE9下也无法响应删除操作。 不过我们可以用onselectionchange这个事件来帮助修正这个BUG。 onselectionchange 触发的条件有很多，其中一个就
oninput那些事
Aiarron的博客
08-14 1163
最近使用了一种oninput的事件。这个好像是html5新出的一种新事件。个人感觉很好用。它完美的实时监听文本框输入。我觉得是一个非常好用的事件。onkeyup和onkeydown事件都有点缺陷。 oninput事件是除IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每增加或删除一个字符就会触发，然而通过js改变value时，却不会触发。 举个例子：<body> <i
解决IE下input事件初始化自动执行的问题
qq_36485978的博客
08-28 1073
jQuery的on("input")事件在IE下刷新页面时会自动执行，解决办法是在外层加一个focus事件 <html> <head></head> <body> <input id="test" /> </body> <script> $(document).ready(function...
vue element-UI使用el-select时@change不能触发的解决方案（通过el-option @click.native原生方法）
热门推荐
★【World Of Moshow 郑锴】★
10-18 3万+
前言 在下刚入门VUE不久，最近有个项目的页面进行了VUE改造，使用的是 element-UI ，其中有个功能如下，有一下拉选择列表：证书类别，选择其中某个证书类别，自动根据证书类别设置的前缀填写到证书编号的输入框中去。 按道理这是一个onChange事件，也就是el-select的@Change事件可以搞定，但是却多次输出的undefined，最后通过改变思路，使用了el-option的@click.native的原生方法来实现。 源代码+解决方案 源代码+解决方案一起验证，忽略其他细节不看，我们可以发
实时监听输入框值变化的完美方案：oninput & onpropertychange
Zoe_Wang_ing的专栏
09-09 1075
转自：http://www.jb51.net/article/35964.htm
关于input file directory 目录上传，取消事件捕捉问题
wu_hb的博客
06-22 1679
关于input file directory 目录上传，取消事件捕捉问题起因过程问题解决方案 起因 在一个项目应用中，涉及到一个大数据量上传的业务场景，客户要求使用文件夹上传的方式，内部文件数量几千至几万不等，在上传过程中，使用的是input[type=file] 方式： <input type="file" webkitdirectory multiple /> 过程 在选择文件夹并上传的过程中，浏览器（此处使用的chrome）会出现两次弹窗： 1.文件选择弹窗 2.浏览器安全警告弹窗（此
onBlur方法修改了input值后，又触发了onChange方法。如何避免触发OnChange方法
10-19
当`onBlur`事件改变`input`元素的值后，通常会自动触发`onChange`方法，这是设计上的预期，因为这两个事件通常用于处理用户输入。然而，如果你确实希望防止`onChange`在`onBlur`事件后立即触发，你可以采取以下几种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值