使用$.ajaxFileUpload上傳時設定的onchange只能執行一次的解決方案
阿新 • • 發佈:2019-02-15
今天在寫圖片上傳的時候突然發現<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哈哈~