微信公众号图片上传和预览功能前端实现

前端jsp页面

<head>
<script type="text/javascript" language="javascript" src="https://res.wx.qq.com/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>

实际效果:可以选择拍照或者本地上传,点击删除按钮可进行删除图片,超过指定张数不可选择,点击图片可以进行放大预览,支持左右滑动预览

微信公众号图片上传和预览功能前端实现相关推荐

alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
layui上传图片列表展示_ThinkPHP5+Layui实现图片上传加预览功能
html代码上传封面 js代码 var uploadInst = upload.render({ elem:'#cover' ,url:'addCourse' ,accept:'file' // 允 ...
前端实现微信公众号图片上传预览jssdk
最近做了公众号的项目,需要用jssdk,研究了一段时间也走了一些弯路,现在做一些记录 1.首先引入 <script src = "http://res.wx.qq.com/open/j ...
利用jquery.form.js实现Ajax无刷新图片上传及预览功能
某些时候当我们做登记页面的时候可能需要上传图片,并实现即时预览的功能. 如果只是预览而不上传,可以使用ImagePreview来实现,方便简单.如果需要上传,那么你也可以使用uploadify无刷新上 ...
js html怎么加入图片,js实现图片上传并预览功能
思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个标签,在图片上传之后,用新图片的src替换原来标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对 ...
微信小程序图片上传和预览以及取消上传图片案例
前言: 做小程序项目遇到一个需求,就是上传图片和预览,以及取消指定的图片,其实这个功能挺好搞的,借助微信官方的API结合实现,只不过注意一点细节.不多说了直接上代码和效果图.大家可以直接复制我的代码进 ...
html实现多图片上传并预览,【前端预览】实现多张上传图片预览查看
alert("抱歉,你的浏览器不支持 FileReader"); input.setAttribute('disabled','disabled'); }else{ input.a ...
java开发微信公众号图片上传功能，不吃透都对不起自己
常见的分布式事务场景分布式事务其实就在我们身边,你一直在用,但是你却一直不注意它. 转账扣你账户的余额,增加别人账户余额,如果只扣了你的,别人没增加这是失败:如果没扣你的钱别人也增加了那银行的赔钱 ...
微信小程序删除服务器图片,微信小程序实现图片上传放大预览删除代码
本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 image.js代码: = 9) { this.setData({ lenMore: 1 }); setTimeou ...

微信公众号图片上传和预览功能前端实现

微信公众号图片上传和预览功能前端实现相关推荐

最新文章

热门文章