如何檢測到在<inputtype="file"/>選擇檔案對話框上單擊了取消按鈕？

要處理網站上的檔案上傳，我們必須使用隱藏<input type="file" />元素。

要找出在選擇檔案對話框中選擇了哪個檔案，我們可以使用onchange事件。

但是我們如何檢測用戶是否點擊了取消按鈕呢？不幸的是，沒有oncancel事件。

有很多變通方法可以檢測用戶是否點擊了取消按鈕，但是由于我在此處描述的問題，它們都沒有可靠地為我作業。

uj5u.com熱心網友回復：

我已經投入了無數個小時來尋找解決方案。現在我想與您分享我的解決方案。

我使用三個事件處理程式：

1. onchange檔案輸入事件：檢測何時選擇了檔案。

2. onfocusevent on window：檢測“選擇檔案”對話框何時關閉。

3. onmousemoveevent on document.body：檢測互動何時不再被阻止。只有當這個事件被呼叫時，才能確定onchange輸入元素的事件已經被呼叫。

前兩點很明顯，您可以在大多數建議的解決方案中找到它們。onchange但關鍵點是第 3 點。在其他解決方案中，我有時會遇到選擇一個檔案的問題，但是在視窗獲得焦點之前，這個選定的檔案沒有傳播到事件處理程式。

長話短說，這是我的實作：

打字稿解決方案：

public static selectFile(accept: string = null): Promise<File> {
    return new Promise<File>(async resolve => {
        const fileInputElement = document.createElement('input') as HTMLInputElement;
        fileInputElement.type = 'file';
        fileInputElement.style.opacity = '0';
        if (accept) fileInputElement.accept = accept;
        fileInputElement.addEventListener('change', () => {
            const file = fileInputElement.files[0];
            console.log('File "'   file.name   '" selected.');
            document.body.removeChild(fileInputElement);
            resolve(file);
        });
        document.body.appendChild(fileInputElement);
        setTimeout(_ => {
            fileInputElement.click();
            const onFocus = () => {
                window.removeEventListener('focus', onFocus);
                document.body.addEventListener('mousemove', onm ouseMove);
            };
            const onMouseMove = () => {
                document.body.removeEventListener('mousemove', onm ouseMove);
                if (!fileInputElement.files.length) {
                    document.body.removeChild(fileInputElement);
                    console.log('No file selected.');
                    resolve(null);
                }
            }
            window.addEventListener('focus', onFocus);
        }, 0);
    });
}

JavaScript 解決方案：

function selectFile(accept = null) {
    return new Promise(async resolve => {
        const fileInputElement = document.createElement('input');
        fileInputElement.type = 'file';
        fileInputElement.style.opacity = '0';
        if (accept) fileInputElement.accept = accept;
        fileInputElement.addEventListener('change', () => {
            const file = fileInputElement.files[0];
            console.log('File "'   file.name   '" selected.');
            document.body.removeChild(fileInputElement);
            resolve(file);
        });
        document.body.appendChild(fileInputElement);
        setTimeout(_ => {
            fileInputElement.click();
            const onFocus = () => {
                window.removeEventListener('focus', onFocus);
                document.body.addEventListener('mousemove', onm ouseMove);
            };
            const onMouseMove = () => {
                document.body.removeEventListener('mousemove', onm ouseMove);
                if (!fileInputElement.files.length) {
                    document.body.removeChild(fileInputElement);
                    console.log('No file selected.');
                    resolve(null);
                }
            }
            window.addEventListener('focus', onFocus);
        }, 0);
    });
}

標籤：javascript html 打字稿 文件 上传

上一篇：如何在Emacs中保存緩沖區而不訪問它？

下一篇：如何在sedbash中的變數中傳遞反斜杠