<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传</title>
<script src="jquery-3.3.1.js"></script>
</head>
<style>
*{padding: 0;margin: 0;}
body{background: #f5f5f5;}
ul{list-style: none;}
img{vertical-align: middle;border: 0;}
.upload-content{
width: 682px;
margin: 0 auto;
font-size: 12px;
color: #666;
padding: 20px;
background: #fff;
}
.upload-content .content-img{
width: 682px;
}
.upload-content .content-img-list{
display: inline;
width: 682px;
}
.upload-content .content-img .ico-plus{
display: inline-block;
vertical-align: middle;
margin-top: -4px;
margin-left: 2px;
width: 28px;
height: 28px;
background: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-plus.png') center/28px 28px;
}
.upload-content .content-img-list-item{
position: relative;
display: inline-block;
width: 165px;
height: 96px;
margin-top: 20px;
margin-left: 7px;
}
.upload-content .content-img-list-item:first-child{
margin-left: 0;
}
.upload-content .content-img-list-item .hide{
display: none;
}
.upload-content .content-img-list-item .delete-btn{
position: absolute;
left: 0;
bottom: 0;
text-align: center;
width: 100%;
background: rgba(0,0,0,0.6);
height: 28px;
line-height: 28px;
color: #fff;
cursor: pointer;
}
.upload-content .content-img-list-item .ico-delete{
display: inline-block;
vertical-align: middle;
width: 12px;
height: 13px;
background: url('https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-delete.png') center/12px 13px;
}
.upload-content .content-img-list-item img{
width: 165px;
height: 96px;
}
.upload-content .upload-tips{
padding-top: 10px;
text-align: right;
width: 100%;
}
.upload-content .file{
position: relative;
display: inline-block;
border: 1px dashed #DEDEDE;
border-radius: 4px;
color: #999999;
text-decoration: none;
text-indent: 0;
width: 165px;
height: 96px;
line-height: 96px;
margin-top: 20px;
}
.upload-content .file input{
position: absolute;
font-size: 0px;
right: 0;
top: 0;
opacity: 0;
cursor: pointer;
width: 165px;
height: 96px;
}
.upload-content .file:hover{
color: #999999;
}
.upload-submit{
text-align: center;
margin-top: 50px;
}
.upload-submit .btn-submit-upload{
display: inline-block;
width: 170px;
height: 40px;
text-align: center;
line-height: 38px;
font-size: 14px;
box-sizing: border-box;
background: #ff8819;
color: #fff;
border: 1px solid #ff8819;
border-radius: 2px;
text-decoration: none;
}
</style>
<script>
var imgFile = []; //文件流
var imgSrc = []; //图片路径
var imgName = []; //图片名字
$(function () {
// 鼠标经过显示删除按钮
$(".content-img-list").on('mouseover','.content-img-list-item',function () {
$(this).children('a').removeClass('hide');
})
// 鼠标离开隐藏
$(".content-img-list").on("mouseleave",'.content-img-list-item',function () {
$(this).children('a').addClass('hide');
});
function addNewContent(obj) {
$(obj).html("");
for(var i=0;i<imgSrc.length;i++){
var oldBox=$(obj).html();
$(obj).html(oldBox+'<li class="content-img-list-item"><img src="'+imgSrc[i]+'" alt=""><a index="'+i+'" class="hide delete-btn"><i class="ico-delete"></i></a></li>' );
}
}
// 单个图片删除
$('.content-img-list').on('click','.content-img-list-item a',function () {
var index=$(this).attr("index");
imgSrc.splice(index,1);
imgFile.splice(index,1);
imgName.splice(index,1);
var boxId=".content-img-list";
addNewContent(boxId);
if(imgSrc.length<4){
$('.content-img .file').show();
}
})
function getObjectURL(file) {
var url=null;
if(window.createObjectURL!=undefined){ //基本
url=window.createObjectURL(file);
}else if(window.URL!=undefined){//mozilla(firefox)
url=window.URL.createObjectURL(file);
}else if(window.webkitURL!=undefined){//webkit chrome
url=window.webkitURL.createObjectURL(file)
}
console.log(url);
return url;
}
// 上传
$('#upload').on('change',function () {
if(imgSrc.length>=4){
return alert('最多可上传四张图片');
}
var imgSize=this.files[0].size;
if(imgSize>1024*1024){
return alert("上传图片不能超过1M");
}
console.log(this.files[0].type)
if(this.files[0].type!=='image/png' && this.files[0].type!=='image/jpeg' && this.files[0].type!=='image/gif'){
return alert("图片格式不正确");
}
var imgBox='.content-img-list';
var fileList=this.files;
for(var i=0;i<fileList.length;i++){
var IimgSrc=getObjectURL(fileList[i]);
imgSrc.push(IimgSrc);
imgName.push(fileList[i].name);
imgFile.push(fileList[i]);
}
if(imgSrc.length==4){
$('.content-img .file').hide();
}
addNewContent(imgBox);
this.value=null; //解决无法上传相同图片
});
// 提交请求
$("#btn-submit-upload").on('click',function () {
//FormData上传图片
var formFile=new FormData();
$.each(imgFile,function (i,file) {
formFile.append('myFile[]',file);
});
console.log(imgFile);
$.ajax({
url:'',
type:'POST',
data:formFile,
async:true,
cache:false,
contentType:false,//告诉jQuery不要去设置Content-Type请求头
processData:false,// 告诉jQuery不要去处理发送的数据
dataType:'json',
success:function (res) {
console.log('图片上传成功');
}
})
})
})
</script>
<body>
<div class="upload-content">
<div class="content-img">
<ul class="content-img-list">
<li class="content-img-list-item"><img src="https://www.baidu.com/img/bd_logo1.png" alt=""><a class="delete-btn"><i class="ico-delete"></i></a></li>
</ul>
<div class="file">
<i class="ico-plus"></i>上传图片<input type="file" name="file" accept="image/*" id="upload">
</div>
</div>
<div class="upload-tips">
最多上传四张图片，单张1M
</div>
</div>
<div class="upload-submit">
<a href="javascript:;" id="btn-submit-upload" class="btn-submit-upload">提交</a>
</div>
</body>
</html>
网友评论