前端实现微信公众号图片上传预览jssdk

最近做了公众号的项目，需要用jssdk,研究了一段时间也走了一些弯路，现在做一些记录

1.首先引入 <script src = "http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2.配置jssdk

//配置jssdk

var pageUrl = {

url:encodeURIComponent(location.href.split('#')[0]) //此处必须用#的方式处理地址

};

var work = JSON.stringify(pageUrl);

var thats = this;

// 配置jssdk ;

$.ajax({

url:"http://**********************/getWeChat.jsp", //后台提供的地址，用来返回字段

// dataType: "json",

type:"post",

// data:pageUrl,

data:{

pageUrl:work

success:function(data){

console.log( data);

// return ;

var obj = JSON.parse(data);

console.log(obj.signature,obj.nonceStr,obj.timestamp);

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: 'wxca6121212fff29539', // 必填，公众号的唯一标识(liu)wxca6f1f5b29129539

timestamp: obj.timestamp, // 必填，生成签名的时间戳

nonceStr: obj.nonceStr, // 必填，生成签名的随机串

signature: obj.signature,// 必填，签名

jsApiList: ['chooseImage','uploadImage'] // 必填，需要使用的JS接口列表

});

// return ;

wx.ready(function(){

// alert("success");

console.log("success111");

// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

});

wx.error(function(res){

alert("error");

console.log(res)

// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

});

error:function(err){

alert("error");

console.log(err);

console.log(err.response)

console.log("error")

}

})

3.选图

wx.chooseImage({

count: 9, // 默认9

sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有

success: function (res) {

var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

var xt = navigator.userAgent;

if(xt.indexOf("OS") > -1){

alert("ios");

// ios苹果转base64显示

for(let j=0;j<localIds.length;j++){

wx.getLocalImgData({

localId: localIds[j], // 图片的localID

success: function (res) {

localIds = res.localData; // localData是图片的base64数据，可以用img标签显示

// alert(JSON.stringify(localIds))

alert(localIds);

var html="",ht="",ml="";

if(localIds==1){

ht="<li style = 'position:relative;width: 32%;margin-bottom: .2rem;margin-right:1%;height: 120px;-webkit-box-flex: 0;flex: 0 0 auto;'><img src='"+res.localData+"' alt=''><div style = 'width:20px;height:20px;background:rgba(255,0,0,0.5);border-radius:50%;position:absolute;top:0;right:0;text-align:center;line-height:20px;' class = 'delImage'>x</div></li>"

}else {

ml+="<li style = 'position:relative;width: 32%;margin-bottom: .2rem;margin-right:1%;height: 120px;-webkit-box-flex: 0;flex: 0 0 auto;'><img src='"+res.localData+"' alt=''><div style = 'width:20px;height:20px;background:rgba(255,0,0,0.5);border-radius:50%;position:absolute;top:0;right:0;text-align:center;line-height:20px;' class = 'delImage'>x</div></li>"

}

html+=ht+ml;

alert(html);

$('.xuantuBox').append(html);

funcReadImgInfo();//点击查看大图图片预览功能

// alert(JSON.stringify(result1))

fail: function (res) {

// alert("请联系开发人员")

alert(JSON.stringify(res))

}

});

}

}else {

// alert("安卓");

$.each(localIds,function(i,n){

$(".xuantuBox").append("<li style = 'position:relative;width: 32%;margin-bottom: .2rem;margin-right:1%;height: 120px;-webkit-box-flex: 0;flex: 0 0 auto;'><img style = 'width:100%;height:100%;' src = '"+n+"'><div style = 'width:20px;height:20px;background:rgba(255,0,0,0.5);border-radius:50%;position:absolute;top:0;right:0;text-align:center;line-height:20px;' class = 'delImage'>x</div></li>");

// $(".xuantuBox").append("<li style = 'position:relative;width: 32%;margin-bottom: .2rem;height: 120px;-webkit-box-flex: 0;flex: 0 0 auto;'><img style = 'width:100%;height:100%;' src = '"+n+"'><div style = 'width:40px;height:40px;background:red;position:absolute;top:0;right:0;text-align:center;line-height:40px;' class = 'delImage'>x</div></li>");

});

funcReadImgInfo()//图片预览

}

//点击查看大图

function funcReadImgInfo() {

var imgs = [];

var imgObj = $(".xuantuBox img");//这里改成相应的对象

for (var i = 0; i < imgObj.length; i++) {

imgs.push(imgObj.eq(i).attr('src'));

imgObj.eq(i).click(function () {

var nowImgurl = $(this).attr('src');

//alert(nowImgurl)

// alert(JSON.stringify(result1))

WeixinJSBridge.invoke("imagePreview", {

"urls": imgs,

"current": nowImgurl

});

}

});

4.上传，多图上传

//上传图片

var alllist = []; //给微信服务器上传

var uploadBack = '';//要给后台的东西，

if($('.xuantuBox img').length>0){

console.log("youtu");

// 获取上传图片的id

$.each($('.xuantuBox img'),function(i,m){

alllist.push(m.getAttribute("src"));

})

syncUpload(alllist);

function syncUpload(localIds){

var localIdlist = localIds.pop();

wx.uploadImage({

localId: localIdlist.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得

isShowProgressTips: 1, // 默认为1，显示进度提示

success: function (res) {

var serverId = res.serverId; // 返回图片的服务器端ID,这个serverid是前端吧选择的图片localids上传给微信服务器，微信服务器返回给前端的serverid,前端吧这个给了后台即可

uploadBack += '["'+serverId+'"],';

// alert(uploadBack);

if(localIds.length > 0){

window.setTimeout(function(){

syncUpload(localIds);

},100);

}else{

window.setTimeout(function(){

// downloadImage(0);

},100);

}

fail:function(res){

alert("上传错误");

}

});

}

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

java开发微信公众号图片上传功能，不吃透都对不起自己
常见的分布式事务场景分布式事务其实就在我们身边,你一直在用,但是你却一直不注意它. 转账扣你账户的余额,增加别人账户余额,如果只扣了你的,别人没增加这是失败:如果没扣你的钱别人也增加了那银行的赔钱 ...
JAVA微信公众号开发第8篇JSSDK图片上传预览
简介博主微信JSSDK&图片上传预览基于微信分享做拓展,所以一些配置操作请点击查阅JAVA微信公众号开发第7篇JSSDK&微信分享博文页面 <html><head ...
微信公众号如何上传长图
微信公众号如何上传长图?我们先要了解为什么要做长图,有哪些难题,最后再来解决如何上传长图. 为什么要做长图? 回顾整个2019年,条漫当道,肉眼可见的,大号们都奔着条漫去了.他们大多看上去好像只用了一 ...
html限制视频上传大小,微信公众号怎么上传大视频？可以上传多大的视频？
原标题:微信公众号怎么上传大视频?可以上传多大的视频? 想在公众号文章中插入视频,但不知道公众号可以传多大的视频,这篇文章会给你答案,继续看下去吧~ 微信公众号视频大小限制多少当写公众号文章时,我们 ...
如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
图片上传预览的几种方式，了解下？
图片上传预览场景基本处处可见,朋友圈发动态配图,身份验证及头像更新,莫过如斯. 原由最近在研究twitter PC网站的时候,在个人中心的主页,设置个人的背景图的时候,发现twitter有个非常好的 ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

前端实现微信公众号图片上传预览jssdk

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

最新文章

热门文章