前端jsp页面
<head><script type="text/javascript" language="javascript" src="https://res./open/js/jweixin-1.2.0.js" ></script></head><body><div class="item_flex "><div class="label">上传图片凭证（最多6张）</div></div><div class="item_flex "><div class="pic_upload"><div class="pic_box" onclick="uplpadImage(this);"><img src="" alt="" class="icon-camera" ></div></div></div><div onclick="uploadImg" >提交</div></body><script>$(function(){wx.config({debug: true, // 是否开启调试模式appId: "", // 必填，企业号的唯一标识，此处填写企业号corpidtimestamp: "", // 必填，生成签名的时间戳nonceStr: "", // 必填，生成签名的随机串signature: "",// 必填，签名jsApiList: ["chooseImage","uploadImage","getLocalImgData"] // 必填，需要使用的JS接口列表}); wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。});wx.error(function(res){alert("res="+res.errMsg);// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。}); //删除图片$(document).on('click','.icon-delete2', function () {$(this).parent('.pic_box').remove()})})//获取上传图片var formData;function uplpadImage(obj){var length1=$('.pic_upload').children().length;//剩下可用长度var length2=7-length1;if(length2<=0){return;}wx.chooseImage({count: length2,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success (res) {obj.remove();// tempFilePath可以作为 img 标签的 src 属性显示图片var localIds = res.localIds;let picBox="";for (i in localIds) {picBox+= '<div class="pic_box">';picBox+='<img src="'+localIds[i]+'" alt="" class="goods-pic" onclick="imgPreview(\''+localIds[i]+'\')">';picBox+='<img src="" alt="" class="icon-delete2">';picBox+='</div>';}picBox+= '<div class="pic_box" onclick="uplpadImage(this);">';picBox+='<img src="" alt="" class="icon-camera">';picBox+='</div>';$('.pic_upload').append(picBox)formData=getformData();//由于实际需要转成formdata对象上传到本地后台进行处理,不上传到微信服务器}})}function getformData(){var lenght3=$('.pic_upload').children().length;var index=0;var pzs=[];for(var i=0;i<lenght3-1;i++){var localId=$(".pic_upload div").eq(i).find("img")[0].src;pzs.push(localId);}//alert("pzs:"+pzs);var fd=base64ToFormdata(pzs,index);//base64转Formdatareturn fd;}//base64转formdata对象var fd = new FormData();function base64ToFormdata(pzs,index){wx.getLocalImgData({localId: pzs[index], // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示//alert("localData["+index+"]"+localData);//因为安卓获取的base64编码缺少头部,判断是否有这样的头部if (localData.indexOf('data:image') != 0){localData = 'data:image/jpeg;base64,' + localData;localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');}var data = window.atob(localData.split(",")[1]);//alert("data:"+data);var ia = new Uint8Array(data.length);for (let i = 0; i < data.length; i++) {ia[i] = data.charCodeAt(i);}const blob = new Blob([ia], { type: 'image/jpeg' });fd.append('files', blob, new Date().getTime() + '.jpg');index = index + 1;if (index < pzs.length) {//由于getLocalImgData是异步请求,需要递归遍历getBase64(pzs, index);}}});return fd;}//上传图片function uploadImg(){$.ajax({ url :' ', //上传到后台进行处理type: "POST", data: formData,contentType: false,processData: false,cache:false,async:false,success : function(data) {},error : function(){} });}//图片预览功能function imgPreview(src){var pzs=[];var lenght3=$('.pic_upload').children().length;for(var i=0;i<lenght3-1;i++){var localId=$(".pic_upload div").eq(i).find("img")[0].src;pzs.push(localId);}wx.previewImage({current:src,urls:pzs});}</script>
实际效果:可以选择拍照或者本地上传,点击删除按钮可进行删除图片,超过指定张数不可选择,点击图片可以进行放大预览,支持左右滑动预览
