仿微博上传多张图片功能-全
html：
<div class="meta_edit">
<a class="fa-ico uploadImage_Icon" onclick="ImageAlert()"><i class="fa fa-photo"></i><span class="meta_photo">图片</span></a>
<a class="fa-ico edit_ico"><i class="fa fa-pencil"></i><span class="meta_photo">文章</span></a>
<div class="send_button" onclick="uploadPic()">发布</div>
</div>
<!--点击图片出现下方图片列表弹出框-->
<div class="alert_imageWrapper">
<form action="" enctype="multipart/form-data" style="text-align: left;">
<div class="upload_wrapper">
<p class="upload_title">本地上传</p>
<p class="upload_num">共<span class="sum_upload_image"></span>张，还能上传<span class="leave_upload_image"></span>张</p>
<div class="imgOnloadWrap"></div>
<div class="upWrapper addImageWrapper">
<div class="fileWrap">
<input type="file" class="file_uploadImage" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>
</div>
<div class="imgWrap upedImg">
<!--<img src="img/001-signs.png" class="imgWrap_image_item" />-->
<div class="upload_addImage_icon"><i class="fa fa-plus add_icon" style="font-size: 24px;"></i></div>
</div>
</div>
</div>
</form>
</div>
js:
//点击图片出现下方图片列表弹出框
function ImageAlert(){
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
//offset: [\'350\', \'380\'],//弹窗自定义位置
area: [\'330px\', \'auto\'],
// area: [\'340px\', \'160px\'],
content: $(\'.alert_imageWrapper\'),
scrollbar: false,
cancel: function(){
console.log(imgFile)
$(\'.imgOnloadWrap\').html(\'\');
$(\'.addImageWrapper\').css("display","block"); //关闭时隐藏掉添加按钮要显示
},
});
}
//判断弹窗位置-在图片下方
$(document).ready(function(){
$("button").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
});
//点击预览上传图片方法
var imgFile;
function upImg(obj){
imgFile = obj.files[0];
// console.log(imgFile);
var img = new Image();
var fr = new FileReader();
fr.onload = function(){
var htmlStr = \'<div class="upWrapper">\';
htmlStr += \'<div class="fileWrap">\';
htmlStr += \'<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>\';
htmlStr += \'</div>\';
htmlStr += \'<div class="imgWrap upedImg"><span class="deleteImg">X</span> \';
htmlStr += \'<img src="\'+fr.result+\'" alt="" />\';
//htmlStr += \'<div class="upload_addImage_icon"><i class="fa fa-plus add_icon" style="font-size: 24px;"></i></div>\';
htmlStr += \'</div>\';
htmlStr += \'</div>\';
$(\'.imgOnloadWrap\').append(htmlStr);
obj.value = \'\';
}
var preview = $(\'.upedImg\').find(\'img\')[0];
// fr.addEventListener("load", function() {
// preview.src = fr.result; //拿到图片的结果
// }, false);
fr.readAsDataURL(imgFile);
uploadPic(imgFile); //上传图片
}
//删除图片
$(document).on(\'click\',\'.upedImg .deleteImg\',function(){
//处理未来事件
$(this).parent().parent().remove();
$(\'.addImageWrapper\').css("display","block");
})
//上传图片
function uploadPic(imgFile){
var formData=new FormData();
formData.append("file",imgFile);
$.ajax({
type: \'POST\',
url:WebApiHostJavaApi + \'common/upload\',
data: formData,
// datType: "json",
async: false,//使用同步的方式,true为异步方式
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
success:function(data){
if (data.code == 0) {
layer.msg(\'上传成功\')
var imgUrl=data.datas[0]; //保存返回的图片地址
// var arr = new Array(9); //创建数组保存9张图片
// arr[0]=imgUrl;
// console.log(arr)
}else if(data.code == -1){
layer.msg(data.msg)
}
},
error:function(e){
// ui.fileUpLoading = false
layer.msg("上传错误，请重试！");
}
});
}
//限制上传图片数量
var uploadImageNum; //
$(".file_uploadImage").change(function(e){
// var num=e.target.files.length //这就是用户选择的图片数量，根据这个值决定是否进行上传
uploadImageNum=$(".imgOnloadWrap .upWrapper").length
if(uploadImageNum >= 8){ //限制上传图片为9张
$(\'.addImageWrapper\').css("display","none");
}
$(\'.sum_upload_image\').html(uploadImageNum + 1); //一共几张照片
$(\'.leave_upload_image\').html(8 - uploadImageNum ); //已经上传几张照片
});
css:
.uploadImage_Icon{
position: relative;
}
/*删除选择图片*/
upedImg{
z-index: 3 !important;
}
.upedImg > span.deleteImg{
position: absolute;
content: \'X\';
width: 20px;
font-size: 12px;
color: white;
background: rgba(0, 0, 0, 0.58);
text-align: center;
line-height: 20px;
right: 0;
top: 0;
z-index: 4;
}
.upWrapper{
width: 80px;
height: 80px;
margin: 10px;
float: left;
position: relative;
cursor: pointer;
margin-top: 20px;
}
.upWrapper > .fileWrap > input[type=file]{
z-index: 2;
opacity: 0;
width: 100%;
}
.upWrapper > .imgWrap{
z-index: 1;
}
/*layer弹窗位置*/
/*#layui-layer1{
position:absolute;
top: 200px !important;
left: 18px !important;
border-radius: 5px !important;
border: solid 1px #80808059 !important;
}*/
.layui-layer{
position:absolute !important;
top: 200px !important;
left: 18px !important;
border-radius: 5px !important;
border: solid 1px #80808059 !important;
}
.layui-layer-content{
overflow: hidden;
}
.alert_imageWrapper{
display: none;
height: auto;
}
/*高度自定义隐藏滚动条*/
.layui-layer-content{
height: auto !important;
}
.upload_wrapper{
padding: 10px;
}
.upload_title{
font-weight: bold;
}
.upload_addImage_icon{
width: 80px;
height: 80px;
border: dashed 2px gainsboro;
text-align: center;
line-height: 80px;
}
.upload_addImage_icon:hover{
border: dashed 2px rgb(79, 163, 237);
}
.add_icon{
color:#9e9e9e7a;
font-size:36px
}
.add_icon:hover{
color:rgb(79, 163, 237) ;
}
.imgWrap_image_item{
width: 80px;
height: 80px;
}
.imgWrap{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.file_uploadImage{
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 2;
}
.upWrapper>.imgWrap>img{
width: 100%;
height: 100%;
}
.upWrapper>.imgWrap>img{
background: rgba(0, 0, 0, 0.58);
background-color: darkblue;
}