js之input[type=file]選擇重復的文件,無法觸發(fā)change事件問題

更新時間：2023年05月25日 10:34:57 作者：草字

這篇文章主要介紹了js之input[type=file]選擇重復的文件,無法觸發(fā)change事件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

input[type=file]選擇重復的文件,無法觸發(fā)change事件

選擇文件的時候，瀏覽器會判斷是否跟之前一致，如果一致他就不會重新加載這個文件，避免無謂的加載消耗。

所以我們在不一樣的需求的時候，比如裁剪圖片，無論他是不是相同圖片，都必須讓他觸發(fā)change事件，這樣才能進行下一步處理。

解決方法

給input添加原生事件onblur進行清空，οnblur="this.value=''" ，blur比change事件的優(yōu)先級要高一點。

代碼：

<input type="file" accept="image/*" οnblur="this.value=''" @change="uploadPhoto" class="uploadImg"/>

解決input file change監(jiān)聽文件(圖片)上傳事件多次觸發(fā)

文件上傳html代碼：

<a name="uploadFile" id="uploadFile" href="javascript:;" rel="external nofollow" >[上傳文件]</a>
<input id="myFile" name="myFile" value="上傳圖片" type="file" accept="application/vnd.ms-excel" style="display: none"/>

在上傳文件時候，通常想要監(jiān)聽文件上傳事件：

    /**
     * 點擊上傳文件，觸發(fā)input type="file"
     */
     $("#uploadFile").click(function () {
        const myFile = $("#myFile")
        // 觸發(fā)
        myFile.click()
        // 監(jiān)聽change事件 
        myFile[0].addEventListener('change', function (e) {
            var filesList = document.querySelector('#myFile').files;
            if(filesList.length==0){ //如果取消上傳，則上傳文件的長度為0
                console.log("沒有上傳任何文件");
                return;
            }else{
                //如果有文件上傳，這在這里面進行
                console.log(filesList);
            }
        });
    });

但是結(jié)果一次改變，卻觸發(fā)多次監(jiān)聽：

由于file input出于安全角度，是不允許賦值的，即使是置空，雖然通過給outerHtml賦值可以清空，但僅在ie下起使用。

因為缺少置空的方法，用戶異步上傳完畢文件后選擇相同文件時，不會觸發(fā)change，因為在這種情況下，我們沒有辦法使value（也就是文件路徑）發(fā)生變化。

解決方法是

每次選完文件，就重建此元素，這樣值自然是空的，因為clone不帶值，這樣就是一個全新的file input，每一次選擇，自然各種正常。

    /**
     * 點擊上傳文件，觸發(fā)input type="file"
     */
    $("#uploadFile").click(function () {
        const myFile = $("#myFile")
        // 觸發(fā)
        myFile.click()
        // 監(jiān)聽change事件 
        myFile.unbind().change(function (e) {
            console.log(e)
        })
    });

這樣每上傳一次不同的文件就可以監(jiān)聽到一次改變，符合監(jiān)聽的效果：