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

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

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

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

為什么@change事件會無效？

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

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

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

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

我們在上傳文件處理完成后，重新添加事件

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

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

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

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

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

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

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

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

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

如果你沒有選擇文件的話，直接點擊取消的話，就不會觸發(fā)change事件。

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

附上案例代碼

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