使用$.ajaxFileUpload上传时<input type="file">设置的onchange只能执行一次的解决方案

来源：互联网发布：怎么开淘宝网店视频编辑：程序博客网时间：2024/05/22 10:53

今天在写图片上传的时候突然发现<input type="file">的onchange事件总是只能执行一次，也就是说只能上传一次，而第二次点击上传的时候onchange这个事件就不会触发了。仔细找了找解决方案，据说是因为$.ajaxFileUpload每次上传的时候会把<input type="file">给替换了，所以绑定的onchange事件就失效了，解决办法是重新绑定事件。

亲自试了下，发现可以用。一下是我的代码

html:

 <div class="col-md-2">      <span>个人信息页</span>      <div>      <a href="javascript:;"><input type="file"  class="file" name="uploadfile" id="uploadfile1" img_id="img1" accept="image/*" style="height: 128px;width: 148px;""/><img src="${pageContext.request.contextPath}/images/update.png" id="img1" style="width: 150px; height: 130px;"/>     </a>      </div> </div>

js:

 $(function(){$(".file").change(function(){uploadFile($(this));});   })function uploadFile(self){var file=self.get(0).files[0];var size=file.size;if(size>5242880){alert("上传文件最大不超过5M");return;}var file_id=self.attr("id");var img_id=self.attr("img_id");$.ajaxFileUpload({url:"uploadPic.do",secureuri:false,fileElementId:file_id,context: document.body,dataType:'json',success:function(data){if(data.status==200){$("#"+img_id).attr("src",data.data.picUrl);}alert(data.message);},complete: function(){$(".file").change(function(){uploadFile($(this),file_id,img_id);}); }                        });}

完美解决，O(∩_∩)O哈哈~

阅读全文

0 0