快捷導(dǎo)航

vue中input type=file上傳后@change事件無(wú)效的解決方案

更新時(shí)間：2023年05月25日 10:27:40 作者：高效編程

這篇文章主要介紹了vue中input type=file上傳后@change事件無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

input type=file上傳后@change事件無(wú)效的解決

為什么@change事件會(huì)無(wú)效？

綁定事件無(wú)效的問(wèn)題，不僅僅是Vue中才會(huì)出現(xiàn)的，寫(xiě)原生js時(shí)同樣是上傳完文件后將無(wú)法觸發(fā)事件，簡(jiǎn)單查閱資料，似乎與上傳的DOM組件相關(guān)，因項(xiàng)目緊急也沒(méi)有深究。

怎么解決事件不觸發(fā)的問(wèn)題？

網(wǎng)上大多文章說(shuō)是要移除<input type='file' id='demo'\>再通過(guò)JS動(dòng)態(tài)添加，這樣確實(shí)可以解決問(wèn)題，vue 中也有很多文章說(shuō) 通過(guò) v-if ,我試過(guò)之后發(fā)現(xiàn)v-if也不生效了

借助jQuery重新添加事件,可以解決

我們?cè)谏蟼魑募幚硗瓿珊?，重新添加事?/p>

$("#demo").on("change",function);

將input 選擇的文件置空（初始化）

document.getElementById("demo").value='';

input的type=file觸發(fā)的相關(guān)事件

今天突然用到input相關(guān)的事件，突然發(fā)現(xiàn)自己還沒(méi)有總結(jié)過(guò)input相關(guān)事件的運(yùn)行原理。而且我還竟然翻api去了解了，所以，為了記恨自己，就寫(xiě)了相關(guān)與input相關(guān)的事件運(yùn)行的過(guò)程。

添加了一些相關(guān)的方法測(cè)試了一下。這一節(jié)首先介紹一個(gè)input的type=file的運(yùn)行流程。

我們書(shū)寫(xiě)了mousedown，mouseup，click，input，change，focus，blur綁定到了input上面，模擬點(diǎn)擊選擇了一個(gè)文件，觸發(fā)事件的流程是下面這樣的：

（1）mousedown
（2）focus
（3）mouseup
（4）click
（5）blur
（6）focus
（7）change

首先觸發(fā)了鼠標(biāo)按下事件，然后就是焦點(diǎn)到了input上面，然后鼠標(biāo)抬起，觸發(fā)click點(diǎn)擊事件，失去焦點(diǎn)以后彈出了文件選擇框，選中文件以后觸發(fā)焦點(diǎn)，最后觸發(fā)的change事件。

如果你沒(méi)有選擇文件的話(huà)，直接點(diǎn)擊取消的話(huà)，就不會(huì)觸發(fā)change事件。

所以說(shuō)，如果要監(jiān)聽(tīng)input 的type=file的內(nèi)容變更事件的話(huà)，最好直接用change事件去監(jiān)聽(tīng)。

附上案例代碼

<!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>