input元素type为file类型，change事件在文件选择框出来后点击取消按钮任然触发change事件的处理办法

// html 代码
<input type="file" id="file" />

// jQuery 代码
$('#file').change(function(){
   console.log('change事件');
})

问题描述：

1、在做图片上传功能时，给input绑定了change事件，第一次点击input框时，在打开的文件选择框里点击取消按钮，不会触发change事件。但是当已经上传了图片，再次点击input，在文件选择弹窗里，点击取消按钮，居然会再次触发input的change事件。

2、在选择了一个文件之后，再重新选择同一个文件，这时候就不再触发change事件了。

期望的操作和解决：

当再次点击上传弹窗时，如果点击取消，则不触发change事件。

解决办法：

1、思路是获取input的值进行判断。如果$('#file').val()的值为空的话，则直接return。

// 例如
$('#file').change(function(){
  if($('#file').val() == '') {
    return;
  }
  console.log('change事件');
})

2、选择同一个文件之后，还会再触发change事件的解决办法是在文件上传成功后，把input的值清空。

$('#file').change(function(){
  if($('#file').val() == '') {
    return;
  }
  console.log('change事件');
  // ajax 上传文件
  $.ajax({
    url: 'http://www.jsphp.net/',
    data: data,
    type: "POST",
    dataType: "json",
    cache: false,
    processData: false,
    contentType: false,
    success () {
      // 业务逻辑...
      $('#file').val('') // 清空原有的数据
    }
  })
  
})