vue中input type=file上传后@change事件无效的解决方案
input type=file上传后@change事件无效的解决
为什么@change事件会无效？
绑定事件无效的问题，不仅仅是Vue中才会出现的，写原生js时同样是上传完文件后将无法触发事件，简单查阅资料，似乎与上传的DOM组件相关，因项目紧急也没有深究。
怎么解决事件不触发的问题？
网上大多文章说是要移除<input type='file' id='demo'\>再通过JS动态添加，这样确实可以解决问题，vue 中也有很多文章说 通过 v-if ,我试过之后发现v-if也不生效了
借助jQuery重新添加事件,可以解决
我们在上传文件处理完成后，重新添加事件
$("#demo").on("change",function);将input 选择的文件置空（初始化）
document.getElementById("demo").value='';input的type=file触发的相关事件
今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与input相关的事件运行的过程。
添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。
我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input上面，模拟点击选择了一个文件，触发事件的流程是下面这样的：
- （1）mousedown
- （2）focus
- （3）mouseup
- （4）click
- （5）blur
- （6）focus
- （7）change
首先触发了鼠标按下事件，然后就是焦点到了input上面，然后鼠标抬起，触发click点击事件，失去焦点以后弹出了文件选择框，选中文件以后触发焦点，最后触发的change事件。
如果你没有选择文件的话，直接点击取消的话，就不会触发change事件。
所以说，如果要监听input 的type=file的内容变更事件的话，最好直接用change事件去监听。
附上案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" id="input">
</body>
<script>
document.getElementById("input").addEventListener("focus",function () {
console.log("focus");
});
document.getElementById("input").addEventListener("mousedown",function () {
console.log("mousedown");
});
document.getElementById("input").addEventListener("mouseup",function () {
console.log("mouseup");
});
document.getElementById("input").addEventListener("input",function () {
console.log("input");
});
document.getElementById("input").addEventListener("change",function () {
console.log("change");
});
document.getElementById("input").addEventListener("blur",function () {
console.log("blur");
});
document.getElementById("input").addEventListener("click",function () {
console.log("click");
});
</script>
</html>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了VueJS如何引入css或者less文件的一些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇文章主要介绍了Vue常用指令_V-model用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了Vue.js axios响应拦截如何获取返回状态码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
vxe-table 实现 excel 选择一个单元格拖拽自动复制新的单元格(示例代码)
vxe-table是一款强大的表格组件,支持Excel风格的操作,通过鼠标右下角的扩展按钮,用户可以拖拽选择单元格并自动复制内容到扩展区域的所有单元格中,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-01-01
这篇文章主要介绍了vue大型项目之分模块运行/打包的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
vue el-table字段点击出现el-input输入框,失焦保存方式
这篇文章主要介绍了vue el-table字段点击出现el-input输入框,失焦保存方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
本文主要介绍了vue3插件json2ts的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
vue手机端input change时,无法执行的问题及解决
这篇文章主要介绍了vue手机端input change时,无法执行的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue echarts 实现离线中国地图的示例代码(细化到省份)
这篇文章主要介绍了Vue echarts 实现离线中国地图,细化到省份,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）
本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统，这个博客使用Vue做前端框架，Node+express做后端，数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能，需要的朋友可以参考学习。2017-04-04
最新评论