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

最新推荐文章于 2022-01-08 22:22:43 发布

奇葩葩葩

最新推荐文章于 2022-01-08 22:22:43 发布

阅读量698

点赞数 1

文章标签： javascript css html 图片上传

本文链接：https://blog.csdn.net/caochenyu0/article/details/53814036

版权

<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]);
	    			}
				}
			}	    	
		});