主要用到的就是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>
