在前端文件上传案例中，最常见的就是监听文件选择，而有的时候我们需要知道文件选择框是否已经关闭或点击了取消，传统得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 {};
按钮嵌入另一个系统的页面，在该页面关闭后需要回刷原页面。困难在于链接的目标页面的js不在本系统，只能通过监听页面关闭，再回刷原页面。
通过对象监听方式实现。将链接的目标页面作为对象监听，监听该对象是否关闭，同时判断是否回刷原页面。
附上Vue.js代码
huishuaOnClick: function() {
				//将链接目标页面作为对象
				var spwindow...
				
不管我们用javascript做什么开发，总会出现项目运行异常，甚至crash，这个时候，我们希望不只是javascript会打印一行日志，而是可以出现一个弹窗或者其他的一些让我们开发者更能直接获取到的信息。
对于这个需求，javascript已经帮我们实现了，我们只需要重写
window.onerror方法
window.onerror = function() {
    //do s...
				
自己摸索着在jsp的发送请求之前加入了一句代码添加页面上传文件的提示
$.messager.alert(‘提示’,‘文件上传中，请稍候…’)
提示是加上了，不过不会自动关掉，把上传成功的弹窗关掉它还在。
于是换着法的百度，就是找不到想要的，后来找朋友问了一下，朋友又找以前的前端朋友问了一下，得到一个简短而又简单的答复。
简短而又有点理解不了，过了一会朋友又发过来一张截图
$.messages.progress(‘close’);
又试了一下，确实达到了自动关闭弹窗的目的。
window.onbeforeunload = function(e) {
	var e = window.event ||e;
	e.returnValue=("是否确定关闭页面");
加入js文件后，查看网页效果：
点击网页对应窗口的关闭按钮，会弹窗如下弹窗：
1. 在 HTML 文件中，创建一个用于文件上传的表单元素：
```html
<form id="uploadForm" enctype="multipart/form-data">
  <input type="file" name="file" id="fileInput">
  <input type="submit" value="Upload">
</form>
2. 使用 JavaScript 监听表单的提交事件，并在提交时执行相应的操作：
```javascript
document.getElementById('uploadForm').addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认的表单提交行为
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  if (file) {
    var formData = new FormData();
    formData.append('file', file);
    // 使用 AJAX 发送文件上传请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        // 文件上传成功后执行以下操作
        alert('文件上传成功');
        location.reload(); // 刷新当前页面
      } else {
        alert('文件上传失败');
    xhr.send(formData);
在上面的代码中，我们首先获取文件输入框的内容，然后创建一个 FormData 对象，将文件添加到其中。接下来，我们使用 AJAX 发送文件上传请求，并在请求成功时弹出一个成功提示框，然后通过 `location.reload()` 方法刷新当前页面。
请注意，上述示例中的 `/upload` 是一个示意的服务器端接口，你需要根据你的实际情况进行替换。此外，你可能还需要根据你的项目需求对代码进行适当的调整。