主要用到的就是input里面的file，上传完成拿到文件流发给后端后端返回图片路径，让后前端展示出来。本篇文章包含单图上传和多图上传。最后有代码复制后更换上传接口，即可使用。
1.单图上传。
思路：拿到中间点击上传元素，点击后给父元素下面增加一个input标签，自触发点击事件并且监听input的上传如果上传成功，隐藏上传二维码元素再增加img元素。
2.多图上传。
思路：多图上传和单图上传方法都一样不过多了一点东西，那就是上传完之后要拿到的是个图片数组，所以我们要先var一个空数组，用来上传完毕后拿到上传的图片数组。每次上传成功都向数组里面push一个数据，删除就用splice这里也可以设置最大上传，用来做校验。
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>上传图片</title>
<meta name="keywords" content="关键词" />
<meta name="description" content="描述" />
<link href="/static/css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.SuperSlide.2.1.1.js"></script>
</head>
<style>
.c_left2 .items {
min-height: 45px;
display: flex;
margin-bottom: 24px;
margin-top: 40px;
}
.c_left2 .items .left_text::before {
content: '*';
display: inline-block;
margin: 5px;
color: #FF9C00;
font-size: 14px;
}
.c_left2 .items .right_text .nameflex {
width: 320px;
display: flex;
justify-content: space-between;
}
.c_left2 .items .right_text .nameflex .nameitem .itimg {
width: 144px;
height: 98px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
text-align: center;
cursor: pointer;
}
.c_left2 .items .right_text .nameflex .nameitem .itimgs1 {
width: 130px;
height: 130px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
text-align: center;
cursor: pointer;
}
.c_left2 .items .right_text .nameflex .nameitem .itimgs1 .photo3 {
width: 42px;
height: 34px;
}
.c_left2 .items .right_text .nameflex .nameitem .itimgs1 .abimg {
width: 120px;
height: 120px;
}
.c_left2 .items .right_text .nameflex .nameitem .itimg .texts {
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #1296DB;
}
.c_left2 .items .right_text .nameflex .nameitem .itimg:hover .absimg {
display: block;
cursor: pointer;
}
.c_left2 .items .right_text .nameflex .nameitem .itimg .absimg {
background-color: rgba(0, 0, 0, 0.7);
width: 144px;
height: 98px;
position: absolute;
color: #fff;
text-align: center;
line-height: 98px;
display: none;
}
.c_left2 .items .right_text .nameflex .nameitem .texts {
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #666666;
margin-top: 10px;
text-align: center;
}
.c_left2 .items .right_text .nameflex img {
width: 126px;
height: 85px;
}
.itemnum2 .left_text {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #333333;
}
.itemnum2 .left_text::before {
content: '*';
display: inline-block;
margin: 5px;
color: #FF9C00;
font-size: 14px;
}
.itemnum2 .right_text {
margin: 20px 18px 34px 80px;
display: flex;
}
.itemnum2 .right_text .uploadimg {
width: 160px;
height: 160px;
background: #FFFFFF;
border: 1px solid #EEEEEE;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-right: 10px;
border-radius: 4px;
}
.itemnum2 .right_text .uploadimg .upitem .imgs {
width: 42px;
height: 34px;
}
.itemnum2 .right_text .uploadimg .upitem .texts {
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #1296DB;
margin-top: 14px;
}
.itemnum2 .right_text .preimg {
width: 160px;
height: 160px;
margin-right: 10px;
position: relative;
border-radius: 4px;
}
.itemnum2 .right_text .abimg {
width: 160px;
height: 160px;
margin-right: 10px;
border-radius: 4px;
}
.itemnum2 .right_text .preimg:hover .abimgabs {
display: block;
}
.itemnum2 .right_text .abimgabs {
position: absolute;
top: 0;
width: 160px;
height: 160px;
background-color: rgba(0, 0, 0, 0.7);
text-align: center;
line-height: 160px;
color: #fff;
border-radius: 4px;
display: none;
cursor: pointer;
}
</style>
<body>
<div class="wrap">
<div class="content">
<div class="c_left2">
<form id="form">
<div class="items">
<div class="left_text">微信二维码：</div>
<div class="right_text">
<div class="nameflex">
<div class="nameitem">
<div class=" itimgs1" onclick="uploadimg()">
<div class="imgre">
<img class="photo3" src="/static/allimage/upload.png" alt="" srcset="">
<div class="texts">上传二维码</div>
</div>
</div>
<div class="texts">（请确保扫描此二维码能添加好友）</div>
<input type="hidden" id="wechat_code" name="wechat_code" value="">
</div>
</div>
</div>
</div>
</form>
</div>
<div class="itemnum2">
<div class="left_text" id="shangc">上传作品：
<span style="color: red;">最少上传三张</span> </div>
<form id="imglist">
<div class="right_text">
<div class="uploadimg curPointer" onclick="uploadimgNum($(this))">
<div class="upitem">
<div class="imgre">
<img class="photo3" src="/static/allimage/upload.png" alt="" srcset="">
<div class="texts">上传作品图片</div>
</div>
<input type="hidden" id="photo1" name="service_avatar1" value="">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
<script>
function uploadimg() {
var input = $('<input/>')
input.prop('type', 'file')
input.css('display', 'none')
$('.right_text').append(input)
input.click()
input.on('change', function (event) {
// 通过FileReader读取文件对象
var formData = new FormData()
// formData.append('fileKey', 'PPT/service')
formData.append('file', event.target.files[0])
$.ajax({
method: 'POST',
url: 'https://', //上传接口
contentType: false,
processData: false,
data: formData,
success: function (res) {
$('.imgre').hide()
$('.itimgs1').append(
'<img class="abimg" src="' + res.path + '" alt="" srcset="">'
)
$('#wechat_code').val(res.path)
}
})
// 完成选取文件后，从dom中自我删除
input.remove()
})
}
</script>
<script>
var uplistImg = [];
var index = 0;
function uploadimgNum(item) {
if (uplistImg.length >= 3) {
$('.uploadimg').hide()
}
var input = $('<input/>')
input.prop('type', 'file')
input.css('display', 'none')
$('.right_text').append(input)
input.click()
input.on('change', function (event) {
// 通过FileReader读取文件对象
var formData = new FormData()
// formData.append('fileKey', 'PPT/servicePPT') //上传携带参数
formData.append('file', event.target.files[0])
$.ajax({
method: 'POST',
url: 'https://', //上传接口
contentType: false,
processData: false,
data: formData,
success: function (res) {
$(".sp").remove();
index++
item.after(
'<div class="preimg cl' + index + '">' +
' <img class="abimg" src="' + res.path + '" alt="" srcset="">' +
' <div class="abimgabs" onclick=deleteImg("cl' + index + '",' + index +
')>删 除</div>' +
'</div> '
)
uplistImg.push(res.path)
if (uplistImg.length >= 3) {
$('.uploadimg').hide()
}
}
})
// 完成选取文件后，从dom中自我删除
input.remove()
})
}
//点击删除
function deleteImg(item, index) {
$('.' + item).remove()
uplistImg.splice(0, index);
if (uplistImg.length >= 3) {
$('.uploadimg').hide()
} else {
$('.uploadimg').show()
}
}
</script>
</html>