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

来源:网络 文章列表 2018-11-29 8
在做图片上传功能时,给input绑定了change事件,第一次点击input框时,在打开的文件选择框里点击取消按钮,不会触发change事件。但是当已经上传了图片,再次点击input,在文件选择弹窗里,点击取消按钮,居然会再次触发input的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('') // 清空原有的数据
    }
  })
  
})

 

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论