input多图片上传

.photo{
width: 80px;
border: 1px dashed #eee;
height: 80px;
vertical-align: middle;
text-align: center;
display: flex;
align-items: center;
}
.photo span{
color: #eee;
position: absolute;
z-index: 99999;
left: 35px;
}
.photos{
width: 80px;
border: 1px dashed #eee;
height: 80px;
vertical-align: middle;
text-align: center;
display: flex;
align-items: center;
}
.photos span{
color: #eee;
position: absolute;
z-index: 99999;
left: 35px;
}
.filepath{
width:100%;
height:100%;
opacity: 0;
}
.del{
position: absolute;
width: 100%;
height: auto;
background-color: #eee;
opacity: 0.8;
display: block;
text-align: center;
line-height: 2;
bottom: 0;
z-index: 9999999;
}
.phto{
width: 80%;
height: auto;
float: left;
display: flex;
}


//选择图片
var photofath=[]
var photolists=[]
var fileobj = []
$('#file').on('change', function() { //当chooseImage的值改变时，执行此函数
var filePath = $(this).val() //获取到input的value，里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
// 检查是否是图片
if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
mui.toast("上传错误,文件格式必须为：png/jpg/jpeg！",{ duration:'long', type:'div' })
return;
}else if(photolists.indexOf(filePath) !== -1){
mui.toast("请不要重复上传!!",{ duration:'long', type:'div' })
return;
}else{
if(photofath.length==2){
$('.photo').css('display','none') //上传超过两张隐藏
}
//把我们需要的本地地址，预览地址以及上传的files保存成数组
photolists.push(filePath)
photofath.push(src)
fileobj.push(this.files[0])
var photolist=''
//本地预览图片
for(i in photofath){
photolist +='

'
+''
+''+"删除"+''
+'

重点来了我们要提交数据给后端

//提交数据事件
PostButton.addEventListener('tap', function() {
var index=parent.layer.getFrameIndex(window.name);
//注意创建一个formData用来放数据
var formData = new FormData();
//把我们所有的图片都放进formData中
for(i in fileobj){
formData.append("imgpath"+[i], fileobj[i]);
}
var postdata=formData
mui.showLoading("正在加载..","div")
$.ajax({
type: "post",
url: '放你都请求地址',
data: postdata,
processData: false,
contentType: false,
success: function(data) {
mui.hideLoading();
if(data.code==1){
mui.toast('提交成功',{ duration:'long', type:'div' })
parent.layer.close(index);
}
}
});
});


原创希望大家支持
具体就是这样啦，如果大家有更好的办法，希望不令赐教。。。。。。