Listen input type=file file upload cancel event

When working on a project, it is necessary to judge whether the page changes according to whether the image is uploaded (the premise is that the file has been uploaded, and when the upload is canceled again, the cancellation event is monitored). By consulting relevant information, it is found that the change event cannot be monitored and canceled, so from another perspective: judge whether the uploaded file has value, and then monitor the cancel event.

code show as below:

<input type="file" name="file" id="fileToUpload" accept="image/*" style="display:none;">

js：

var batchUpload = document.querySelector('#fileToUpload');
     batchUpload.click();
     batchUpload.addEventListener('change', function () {
    
                
          var filesList = document.querySelector('#fileToUpload').files;
          if(filesList.length==0){
    
             //如果取消上传，则改文件的长度为0             
               console.log('取消')
               return;
          }else{
    
      
               //如果有文件上传，这在这里面进行
          }
}); 

But there is a problem with the above code:

1. If you choose to open the same file twice, the second open will not be executed.

2. If Cancel is selected in the page dialog box, it cannot monitor or bind the user to cancel the action. (If you choose to cancel the first upload, the code will not be executed)

This is a problem caused by the design of input files, because the input.value value has not changed, the onchange event will not be triggered.

Solve the problem:

To solve the first problem, most browsers limit the value of input.value to be unmodifiable for safety, but it can be left blank. Therefore, after the onchange file opening task is completed, the cached input.value value is empty, and the input.value value is empty before opening the same file for the second time, and onchange will be triggered.

document.querySelector(‘input’).value = “”; //有效
document.querySelector(‘input’).value = “data.xls”; //无效

The idea to solve the second problem is that after the file opening dialog box pops up, the current page loses focus, and when the file selection dialog box is closed (whether it is confirmed or canceled), the page will regain focus. You can bind the page to get the focus event to determine whether the user has canceled the file selection.
It should be noted that the focus event of the browser page is about 20 milliseconds earlier than the onchange event, and the event that needs to be bound to the page is executed after a delay, and setTimeout can be used.

code show as below:

var FLAG = 0;

//上传图片并判断条件
$('#upload').click(function () {
    
    
  FLAG = 1;
  $("#uploading").text('上传中...')
})

$("#fileToUpload").change(function (e) {
    
    
  var fileTypes = [".jpg", ".png"];
      var filePath = fileToUpload.value;
      console.log(filePath)
      if(filePath){
    
    
          FLAG = 2;
          ......
          $("#uploading").text('上传成功');
      }
})

// 取消上传
$(window).focus(f => {
    
    
    setTimeout(e => {
    
    
        if (FLAG == 1) {
    
    
            FLAG = 0;
            console.log('取消');
            $("#uploading").text(' ')
        }
    }, 100);
}); 

So far, two problems have been solved perfectly.