【大前端】JavaScript 监听文件选择弹窗关闭事件

前言

在前端文件上传案例中，最常见的就是监听文件选择，而有的时候我们需要知道文件选择框是否已经关闭或点击了取消，传统得change事件只能获取值得更改不能监听取消事件；

监听取消案例：查看下文代码：

export interface SelectFileOptions {
    accept: string;
    capture: string;
    multiple: boolean;
    webkitdirectory: boolean;
}

/**
 * 选择文件
 * @param options
 * @returns
 */
export function selectFile(options?: SelectFileOptions) {
	//这里用异步是因为：文件选择本身就是异步，因为不确定用户什么时候选择文件
    return new Promise((resolve, reject) => {
    	//在内存中创建文件选择框
        const fileEl = document.createElement("input");
        fileEl.type = "file";
		
		//设置属性
        if (options && options.accept) {
            fileEl.accept = options.accept;
        }

        if (options && options.capture) {
            fileEl.capture = options.capture;
        }

        if (options && options.multiple) {
            fileEl.multiple = options.multiple;
        }

        if (options && options.webkitdirectory) {
            fileEl.webkitdirectory = options.webkitdirectory;
        }
        
        //点击，弹出文件选择框
        fileEl.click();
		
		// 监听当前窗体得聚焦事件
		// 文件选择框弹出后：window 会触发blur 事件，关闭后会触发focus聚焦事件
        window.addEventListener("focus", () => {
        	//这里设置定时，是因为focus是在input change事件前面执行，所以这里的定时必须要设置时间间隔，防止方法内部获取files时获取的值为空
            setTimeout(() => {
                if (!fileEl.files?.length) {
                    reject("cancel select");
                } else {
                    resolve(fileEl.files);
                }
            }, 500);
        });
    });
}

export default {};