JQuery绑定input[type=file]的change事件问题

通过JQuery绑定<input id="importInputFile" type="file"/>的change事件($().change)只能被触发一次,,,不管上传失败还是成功,(谷歌、火狐也一样)
还是只能在标签上绑定了:<input id="importFile" onchange="javascript:$('#importFileName').val"/>
另外,onchange="alert(this.value)" 中的this.value表示当前标签元素的value值

另外的解决方案:INPUT[type=file]的change事件不触发问题(原http://www.cnblogs.com/axl234/p/3897399.html):
在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼。它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已。对于文字没改变的选择,change事件则不会触发。
  当INPUT[type=file]控件上已经选择过一次文件之后,再次点击它选择同一个文件时change事件就不会触发。因为第二次选择后里面的文字和第一次是一样的,没有改变。还有个更蛋疼情况是有些浏览器会自动记住控件上的文字,即使页面关闭后重新打开还是会恢复到原来的文字。这时候选择同路径的文件也不会触发change事件。
  这些问题都是INPUT[type=file]控件蛋疼的设计所引起的,从一般渠道无法解决这个问题。有人建议在点击INPUT[type=file]控件时先清空其文字,这样在选中文件之后自然可以触发change事件。但一些浏览器上对INPUT[type=file]控件的值是只读的,要清空恐怕不容易。但从这里我们可以推广出另一种偷天换日的解决方案。既然值无法写入,为何我们不创建一个新的INPUT[type=file]把旧的替换掉呢?这么一来,需要解决的问题就剩下事件绑定了。这可以通过在容器上绑定事件,之后通过冒泡的方式来获取,而不把事件绑定到目标元素上的方法来解决。下面就是一个不太漂亮的解决办法(由于一些兼容代码写着麻烦,这里直接用了jQuery):

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
  form.reset(); //清除浏览器记录的上次记录
  var file;
  $(form).on("change","#file",function(e){
    //输出选中结果
    console.log(this.value);
    //每次选中都保存旧元素,并使用新的控件替换
    $(this).clone().replaceAll(file=this);
  }).submit(function(){
    //提交时把之前保存的旧元素替换回去
    $("#file").replaceWith(file);
  });
});
</script>
<form id="form">
  <input type="file" name="file" id="file"><br/>
  <input type="submit" />
</form>
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值