ajaxFileUpload onchang第二次失效

最新推荐文章于 2023-08-25 14:56:45 发布

Old丶Seven

最新推荐文章于 2023-08-25 14:56:45 发布

阅读量2.6k

点赞数 3

分类专栏： JQ JS JSP 文章标签： ajaxFileUpload onchang

本文链接：https://blog.csdn.net/zhanqizi/article/details/53486965

版权

JS 同时被 3 个专栏收录

14 篇文章 1 订阅

订阅专栏

JSP

8 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

ajaxFileUpload 用onchang上传只能上传一次第二次就失效了我找这个问题找了很长时间，试了很多种方法都不行，皇天不负有心人终于被我找到解决办法了。

<form action="" id="form1" method="post" enctype="multipart/form-data">
	<input type="hidden" id="openid" name="openid" value="${openid}" />
	<input type="hidden" id="id" name="id" value="${id}" />
	<input type="hidden" id="clmno" name="clmno" value="${clmno}" />
	<input type="hidden" id="updtype" name="updtype" value="01" />
	<div class="page-content">
		<div class="top"><a href="#" class="but">上传资料</a></div>
		<br/>
		<section class="trial">
	        <header><span>理赔申请书</span></header>
        	<div class="file" id="div_file_01">
	        	<input type="file" id="multiFiles01" name="multiFiles"/>
				<img class="src" src="../images/upload/add.jpg" width="100" height="100"/>
        	</div>
		</section>
	</div>
</form>

/*监听所有file下的input的事件 最原始方法 只能上传一次*/
	$(".file input").chang(function(){
		console.log(this.id);
		var file = this.files;
		if(file.length==0){
			$("#msgAlert").html("请选择一张图片");
			$("#alertMsg").show();
		}else{
			for(var i = 0; i < file.length; i++) {
				readAsDataURL(file[i],$(this).parent(),this.id);
			}
		}
	});

/*监听所有file下的input的事件   这是我修改之后的，可上传多次*/
	$(".file input").live("change",function(){//
		console.log(this.id);
		var file = this.files;
		if(file.length==0){
			$("#msgAlert").html("请选择一张图片");
			$("#alertMsg").show();
		}else{
			for(var i = 0; i < file.length; i++) {
				readAsDataURL(file[i],$(this).parent(),this.id);
			}
		}
	});

$.ajaxFileUpload({
        url:"${ctx}claim/uploadImgFile.action?"+str,//需要链接到服务器地址  
        secureuri:false,  
        fileElementId:id,
        dataType: 'json', 
        success: function (data, status){
        	var flag = data.model.success;
        	if(flag==true){
        		var reader = new FileReader();
        		reader.readAsDataURL(file);
        		reader.onload = function(e) {
        			var idtime = new Date().getTime();
        			var divId = "divId_"+idtime;
        			var tt = '<div class="view" id="'+divId+'" ><img class="view_img" src="' + this.result + '"/>'
        			+'<a href="#" οnclick=\'deleteImg("'+divId+'")\'>删除</a></div>';
        			$(par).before(tt);
        			//重的一步，如果没有这一步 onchang事件只能一次
        			$("#"+id).replaceWith('<input type="file" id="multiFiles01" name="multiFiles"/>');
        		}; 
        	}
        },error: function (data, status, e){//相当于java中catch语句块的用法  
        	$("#msgAlert").html("上传失败，请重新上传！");
        	$("#alertMsg").show();
        }  
    });