h5多图片上传

最新推荐文章于 2022-02-23 14:35:55 发布

百味苦

最新推荐文章于 2022-02-23 14:35:55 发布

阅读量401

点赞数

分类专栏： html js，JQuery 文章标签： H5多图片上传

本文链接：https://blog.csdn.net/qq_38026437/article/details/84649027

版权

js，JQuery 同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

html

26 篇文章 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>

百味苦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5多图片上传

做了一个h5多图片上传只要了解了基本原理，那就很好理解了，可以看看注释或者在网上找找原理&lt;!doctype html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport&qu
复制链接

扫一扫