1. 程式人生 > >使用$.ajaxFileUpload上傳時設定的onchange只能執行一次的解決方案

使用$.ajaxFileUpload上傳時設定的onchange只能執行一次的解決方案

今天在寫圖片上傳的時候突然發現<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哈哈~