做了一个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>