快捷導(dǎo)航

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

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

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

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

選擇文件的時(shí)候，瀏覽器會(huì)判斷是否跟之前一致，如果一致他就不會(huì)重新加載這個(gè)文件，避免無(wú)謂的加載消耗。

所以我們?cè)诓灰粯拥男枨蟮臅r(shí)候，比如裁剪圖片，無(wú)論他是不是相同圖片，都必須讓他觸發(fā)change事件，這樣才能進(jìn)行下一步處理。

解決方法

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

代碼：

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

解決input file change監(jiān)聽(tīng)文件(圖片)上傳事件多次觸發(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"/>

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

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

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

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

因?yàn)槿鄙僦每盏姆椒?，用?hù)異步上傳完畢文件后選擇相同文件時(shí)，不會(huì)觸發(fā)change，因?yàn)樵谶@種情況下，我們沒(méi)有辦法使value（也就是文件路徑）發(fā)生變化。

解決方法是

每次選完文件，就重建此元素，這樣值自然是空的，因?yàn)閏lone不帶值，這樣就是一個(gè)全新的file input，每一次選擇，自然各種正常。

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

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