h5多图片上传

迷南。 2022-04-12 02:28 241阅读 0赞

做了一个h5多图片上传

只要了解了 基本原理，那就很好理解了，可以看看注释或者在网上找找原理

<!doctype html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<link href="../css/mui.min.css" rel="stylesheet" />
    		<style type="text/css">
    			.wt{
    				border-bottom: 1px solid #C0C0C0;
    				border-top: 1px solid #C0C0C0;
    				padding: 20px;
    			}
    			.wt>div:first-child{
    				padding-bottom: 10px;
    			}
    			.lx{
    				padding: 20px;
    				border-bottom: 1px solid #C0C0C0;
    			}
    			.img{
    				padding: 20px;
    			}
    			
    			.pb10{
    				padding-bottom: 10px;
    			}
    		
    .imglist{
    	width: 100%;
    	display: flex;
    	justify-content: flex-start;
    	align-items: center;
    }
    .imgcss{
    	width: 5rem;
    	height: 5rem;
    	border: 2px solid #CCCCCC;
    	margin-right: 1em;
    	position: relative;
    }
    .imgcss img{
    	width: 100%;
    	height: 100%;
    }
    .addcss{
    	width: 5rem;
    	height: 5rem;
    	border: 2px solid #CCCCCC;
    	background:#fff;
    	position:relative;
    }
    .addcss > input{
    	position:relative;
        opacity: 0;
        display: block;
        height: 100%;
        width: 100%;
        z-index:998;
    }
    .addcss>span{
    	text-align:center;
        width:2rem;
        height:2rem;
        font-size:3rem;
        margin:auto;
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        z-index:5;
    }
    
    .guanbi{
    	position: absolute;
    	z-index: 99;
    	top: -15%;
    	left: 80%;
    	border: 1px solid #C0C0C0;
    	border-radius: 50%;
    	background-color: white;
    }
    		</style>
    	</head>
    
    	<body>
    		<header class="mui-bar mui-bar-nav">
    		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    		    <h1 class="mui-title">反馈</h1>
    		</header>
    		
    		<div class="mui-content">
    			<form action="" >
    		    <div class="wt">
    		    	<div class="">
    		    		问题与意见 
    		    	</div>
    		    	<div class="">
    		    		<textarea name="" rows="7" cols="22"></textarea>
    		    	</div>
    		    </div>
    		    
    		    <div class="lx">
    		    	<div class="mui-input-row">
    		    	    <label>联系方式</label>
    		    	    <input type="text" placeholder="微信/QQ/邮箱">
    		    	</div>
    		    </div>
    		    
    		    <div class="img">
    		    	<div class="pb10">
    		    		图片（选填）
    		    	</div>
    		    	<div class="imglist" id="imgid">
    		    		<div class="addcss" id="addcss" >
    		    			<input type="file" name="file2" id="going" accept="image/*" multiple="multiple">
    					    <span>+</span>
    		    		</div>
    		    	</div>
    		    </div>
    		    
    		    
    		   <button type="button" class="mui-btn mui-btn-blue mui-btn-block" onclick="sub">提交</button>
    		   
    		   </form>
    		</div>
    		
    		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="../js/mui.min.js"></script>
    		<script type="text/javascript">
    			mui.init();
    //这是用来装图片的数组
    			var imglist = new Array();
    //主要是input的change事件，只要触发就做处理
    			$("#going").on("change",function(){
    				if(typeof FileReader == undefined) {
    				    console.log("不支持filereader");
    				}else{
    
    			         let input = document.getElementById("going");
    			         let imgid = document.getElementById("imgid");
    			         let addcss = document.getElementById("addcss");
    
    			        for(let i=0;i<this.files.length;i++){
    		                if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　　//判断上传文件格式
    		                    return alert("上传的图片格式不正确，请重新选择")　;　　　　　　　　
    		                }
    //创建一个FileReader 用于读取文件
                    	let reader = new FileReader();
    //将文件读取为 DataURL
                    	reader.readAsDataURL(this.files[i]);
    //开始添加dom
    	                reader.onload = function(e){
    	                    result = '<div class="guanbi mui-icon mui-icon-closeempty" onclick="remove(this)"></div><img src="'+this.result+'" alt=""/>';
    //新建一个div
    	                    div = document.createElement('div');
    //将图片存到数组里面
    	                    imglist.push(this.result);
    	                    console.log(imglist.length);
    //设置能放多少个图片（假的）
    	                    setaddcss();
    //给div放样式
    	                    div.className = "imgcss";
    //将html代码放到div里面  样式自己设置
    	                    div.innerHTML = result;
    //这里比较关键
    //insertBefore 是将一个元素添加到指定元素之前 addcss就是在这个元素之前添加
    //div就是要添加的元素
    	                    addcss.parentNode.insertBefore( div,addcss );　　　　　　　　　　
    	                	}
                		}
    				}
    		})
    		function setaddcss(){
    	        if(imglist.length >= 4) addcss.classList.add("mui-hidden");
                else addcss.classList.remove("mui-hidden");
    		}
    //删除节点
    		function remove(obj){
    //用了一个jq 的index函数， 可以获取元素下标
    			let z = $('.guanbi').index(obj);
    //删除父节点，也就是上面添加的 div
    			$(obj).parent().remove();
    //获取到下标，将imglist里面的图片也删除
    			imglist.splice(z,1);
    //设置是否能添加图片
    			setaddcss();
    		}
    		
    //下面就没什么了，上传用的
    		function sub(){
    			if(!imgArr.length){
                        alert('请选择要上传的图片');
                        return;
                }
                var form = document.querySelector('form');
                var fd = new FormData(form);
                for(var i = 0;i < imgArr.length;i++){
                    fd.append('file[]',imgArr[i]);
                }
                var request = new XMLHttpRequest();
                var url = "./file_preview.php";
                request.open('post',url);
                request.send(fd);
    			
    		}
    		
    		
    		</script>
    	</body>
    
    </html>