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

来源:网络 文章列表 2018-11-29 1598
在做图片上传功能时,给input绑定了change事件,第一次点击input框时,在打开的文件选择框里点击取消按钮,不会触发change事件。但是当已经上传了图片,再次点击input,在文件选择弹窗里,点击取消按钮,居然会再次触发input的change事件。
  1. // html 代码
  2. <input type="file" id="file" />
  3. // jQuery 代码
  4. $('#file').change(function(){
  5. console.log('change事件');
  6. })

 

问题描述:

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

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

 

期望的操作和解决:

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

 

解决办法:

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

  1. // 例如
  2. $('#file').change(function(){
  3. if($('#file').val() == '') {
  4. return;
  5. }
  6. console.log('change事件');
  7. })

 

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

  1. $('#file').change(function(){
  2. if($('#file').val() == '') {
  3. return;
  4. }
  5. console.log('change事件');
  6. // ajax 上传文件
  7. $.ajax({
  8. url: 'http://www.jsphp.net/',
  9. data: data,
  10. type: "POST",
  11. dataType: "json",
  12. cache: false,
  13. processData: false,
  14. contentType: false,
  15. success () {
  16. // 业务逻辑...
  17. $('#file').val('') // 清空原有的数据
  18. }
  19. })
  20. })

 

腾讯云限量秒杀

1核2G 5M 50元/年 2核4G 8M 74元/年 4核8G 5M 818元/年 CDN流量包 100GB 9元

版权声明

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

评论

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