移动端formedata上传并预览多张图片

<div id="chequePayContainer">
		<form  name="chequeForm" id="chequeForm" enctype="multipart/form-data" οnsubmit="return false">
			<p>
				<span>票据文件上传 : </span>
				<input name="imgurl" type="file" multiple="multiple" id="inputs" accept="image/jpeg,image/png" style="width: 59%;"/>
				<div id='dd'></div>
				<span style="display: block; margin-top: 0.2rem; position: absolute; right: 0.2rem; font-size:0.22rem ;"><i style="color: #CC0000;" class="num">0</i>/5 </span>
			</p>
		</form>		
</div>

//图片预览
function file() {
	$(document).ready(function() {
		$("#inputs").change(function() {
			var fil = this.files;
			var filL = fil.length;
			var imgLength = $("#dd").find("img").length;
			imgL = filL + imgLength; //容器已有数量+添加数量
			if(imgL > 5){
				imgL = 5;
			}
			$(".num").html(imgL);//数量显示
			if(imgLength == 0){
				if(filL > 5){
					Toast('上传文件不可多于5张',2000);
					$(".num").html("0");//数量显示
				}else{
					for(var i = 0; i < filL; i++) {
						reads(fil[i]);
					}
				}
			}else if(imgLength == 1){
					if(filL > 4){
					Toast('上传文件不可多于5张',2000);
					$(".num").html("1");//数量显示
				}else{
					for(var i = 0; i < filL; i++) {
						reads(fil[i]);
					}
				}
			}else if(imgLength == 2){
				if(filL > 3){
					Toast('上传文件不可多于5张',2000);
					$(".num").html("2");//数量显示
				}else{
					for(var i = 0; i < filL; i++) {
						reads(fil[i]);
					}
				}
			}else if(imgLength == 3){
				if(filL > 2){
					Toast('上传文件不可多于5张',2000);
					$(".num").html("3");//数量显示
				}else{
					for(var i = 0; i < filL; i++) {
						reads(fil[i]);
					}
				}
			}else if(imgLength == 4){
				if(filL > 1){
					Toast('上传文件不可多于5张',2000);
					$(".num").html("4");//数量显示
				}else{
					for(var i = 0; i < filL; i++) {
						reads(fil[i]);
					}
				}
			}
		});
	});
	function reads(fil) {
		var reader = new FileReader();
		reader.readAsDataURL(fil);
		reader.onload = function() {
			document.getElementById("dd").innerHTML += "<img src='" + reader.result + "'>";
		};
	}
}
 //图片上传
		var formData = new FormData();
		$("#inputs").change(function(){
			var oFiles = document.getElementById("inputs").files;
			var imgLength2 = $("#dd").find("img").length;   //预览图片数量
			var filL2 = oFiles.length;  //上传图片数量
			if(imgLength2 == 0){  
				if(filL2 > 5){
					return false;
				}else{
					for(var i = 0; i<= oFiles.length-1;i++){
	    				formData.append('imgurl[]',oFiles[i]);
	    			}
				}
			}else if(imgLength2 == 1){
					if(filL2 > 4){
					return false;
				}else{
					for(var i = 0; i<= oFiles.length-1;i++){
		    			formData.append('imgurl[]',oFiles[i]);
	    			}
				}
			}else if(imgLength2 == 2){
				if(filL2 > 3){
					return false;
				}else{
					for(var i = 0; i<= oFiles.length-1;i++){
			    		formData.append('imgurl[]',oFiles[i]);
	    			}
				}
			}else if(imgLength2 == 3){
				if(filL2 > 2){
					return false;
				}else{
					for(var i = 0; i<= oFiles.length-1;i++){
			    		formData.append('imgurl[]',oFiles[i]);
	    			}
				}
			}else if(imgLength2 == 4){
				if(filL2 > 1){
					return false;
				}else{
					for(var i = 0; i<= oFiles.length-1;i++){
			    		formData.append('imgurl[]',oFiles[i]);
	    			}
				}
			}	    	
		});


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值