微信公众号开发《四》使用微信JS-SDK实现手机图片上传，支持压缩、预览。并下载图片到自身服务器
在这粘贴上三篇博文链接，方便大家查阅互相学习：
微信公众号开发《一》OAuth2.0网页授权认证获取用户的详细信息，实现自动登陆
微信公众号开发《二》发送模板消息实现消息业务实时通知
微信公众号开发《三》微信JS-SDK之地理位置的获取，集成百度地图实现在线地图搜索
本次讲解微信开发第四篇：调用微信JS-SDK实现上传手机图片到服务器，是非常常见的功能。如我们看到的用户上传头像
下面是本次要实现的效果图，支持预览，压缩上传（自带，可参数控制）
1.准备工作：工欲善其事，必先利其器，来看看开发该功能需要准备或了解什么
- web开发工具：官方提供的开发工具，使用自己的微信号来调试微信网页授权、调试、检验页面的 JS-SDK 相关功能与权限，模拟大部分 SDK 的输入和输出。下载地址：web开发工具下载
- 开发文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
- 登录微信测试公众号，获取公众号的appID、appsecret，登录地址：http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
一切就绪，我们知道要使用微信提供的JS-SDK，那就需要调通相关接口权限。关于任何调通，这里就不再次详细说明，不明白者可查看开头介绍的文章三：微信公众号开发《三》微信JS-SDK之地理位置的获取，集成百度地图实现在线地图搜索
2.代码示例，还是老规矩，文字介绍放在代码中，不单独介绍。
1）jsp部分代码，样式那些就不提供了，效果如图一
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>图片管理</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="baidu-tc-cerfication" content="315f7ed10c0de83badbd33934a33aec1"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="telephone=no,email=no" name="format-detection"> <%@include file="includeJs.jsp" %> <input type="hidden" id="timestamp" value="${siInfo.timestamp}"> <input type="hidden" id="nonceStr" value="${siInfo.noncestr}"> <input type="hidden" id="signature" value="${siInfo.signature}"> <input type="hidden" id="weixinOperId" value="${weixinOperId}"> </head> <body> <div class="weui-tab"><div class="weui-tab__bd"><div class="weui-tab__bd-item weui-tab__bd-item--active"><div id="minheight" style="margin-bottom:55px;"><ul id="" class="" style="padding:5px;"><c:choose><c:when test="${fn:length(listPhoto)<=0}"><div class="weui-uploader__bd"><div class="weui-uploader__input-box"><input id="uploaderInput" length="${fn:length(listPhoto)}" class="weui-uploader__input" type="button" accept="image/*" multiple=""></div></div></c:when><c:otherwise><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploaderFiles" style=""><c:forEach items="${listPhoto}" var="photo"><li class="weui-uploader__file weui-uploader__file_status" style="background-size:contain !important;background:url(${BS}${photo.photoUrl}) no-repeat center;"><div class="weui-uploader__file-content"><img vid="${photo.id}" osrc="${photo.photoUrl}" src="${BS}/images/weixin/FileInfo.png"></div></li></c:forEach></ul><c:if test="${fn:length(listPhoto)<5}"><div class="weui-uploader__input-box"><input id="uploaderInput" class="weui-uploader__input" type="button" length="${fn:length(listPhoto)}" accept="image/*" multiple=""></div></c:if></div></c:otherwise></c:choose></ul></div></div></div> </div> <script type="text/javascript" src="${BS}/js/weixin/jweixin-1.2.0.js"></script> <script type="text/javascript" src="${BS}/js/weixin/uploadPhoto.js"></script> </body> </html>
2）重点代码uploadPhoto.js，负责调用接口
/*** @date 2017-12-01* @author 半山闲人* 提示插件使用jqery weui，需要可以研究研究，挺不错的一个插件，官方网站：http://jqweui.com/*/ var signature = $("#signature").val();//后台传回来的调用接口所需参数 var nonceStr = $("#nonceStr").val();//后台传回来的调用接口所需参数 var timestamp = $("#timestamp").val();//后台传回来的调用接口所需参数 var weixinOperId = $("#weixinOperId").val();//后台传回来的调用接口所需参数 wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: weixinOperId, // 必填，公众号的唯一标识timestamp:timestamp, // 必填，生成签名的时间戳nonceStr: nonceStr, // 必填，生成签名的随机串signature:signature,// 必填，签名jsApiList: [ 'previewImage','chooseImage','downloadImage','uploadImage','getLocalImge','getNetworkType'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); wx.ready(function(){//不是wifi提示wx.getNetworkType({success: function (res) {var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifiif(networkType!="wifi"){$.toptip("当前你网络环境为"+networkType+"，上传请注意流量",2000,'warning');}}}); }); wx.error(function(res){}); var visW = $(window).width(); var NvisW = $(window).width(); $(function(){$("#uploaderFiles img").on("click",function(){var th = $(this);$.confirm("是否确实删除该图片", function() {//点击确认后的回调函数var src = $(th).attr("osrc");var id = $(th).attr("vid");toDelPic(id,src);}, function() {//点击取消后的回调函数});});$(".weui-uploader__input").on("click",function(){var length = $(this).attr("length");length = 5-length;wx.chooseImage({count: length, // 可选图片张数，默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片localIdArr = localIds;uploadImg(localIds);}});}); });function toBackOne(){ // var powerStationNumber = $("#powerStationNumber").val(); // location = "/"+getProjectName()+"/wxFirst/getUserPowerStationDetail?powerStationNumber="+powerStationNumber; }var int = 0; var serverIdArr = new Array(); var localIdArr = new Array(); function uploadImg(localId){//上传成功，微信服务器会返回一个本地ID，可以预览var len = localId.length;wx.uploadImage({//根据本地ID获得微信服务器IDlocalId: localId[int].toString(), // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 0, // 默认为1，显示进度提示success: function (res) {int++;var serverId = res.serverId; // 返回图片的服务器端IDserverIdArr.push(serverId);if(len>int){uploadImg(localId);}else{downloadImg(serverIdArr);//下载微信服务器下的图片}}}); }function downloadImg(serverIdArr){//下载微信服务器下的图片到本地$.showLoading("上传中");var stationId = $("#stationId").val();$.ajax({type:"POST",url:"/"+getProjectName()+"/wxFirst/downloadImg",dataType:"json",data:{serverIdArr:serverIdArr,localIdArr:localIdArr,stationId:stationId},success:function(result){$.hideLoading();if(result>0){$.toptip("上传成功",2000,'success');setTimeout(function() {window.location.reload();},2000);}}}); }window.addEventListener('DOMContentLoaded',init,false); function toDelPic(id,src){//删除图片操作 }到此该功能已经完成，但有个最大的不足之处，就是微信没有提供裁剪功能，所以往往上传图片大小不符合需求大小。在此提供的裁剪插件：cropper，有空的可以了解一下。有空也会写一篇不使用微信上传功能，实现图片上传、支持裁剪、压缩。
如有错误与不足之处，欢迎大家评论区提出。
微信公众号开发《四》使用微信JS-SDK实现手机图片上传，支持压缩、预览。并下载图片到自身服务器相关推荐
- Java开发微信公众号（四）---微信服务器post消息体的接收及消息的处理
在前几节文章中我们讲述了微信公众号环境的搭建.如何接入微信公众平台.以及微信服务器请求消息,响应消息,事件消息以及工具处理类的封装:接下来我们重点说一下-微信服务器post消息体的接收及消息的处理,这 ...
- python微信公众号开发教程_python微信公众号开发简单流程实现
本文为大家分享了python微信公众号开发的简单过程,供大家参考,具体内容如下 网上有很多微信公众号的开发教程,但是都是好几年前的了,而且很多都是抄袭其他人的,内容几乎一模一样.真的无语了.只好自己总 ...
- java微信公众号开发四步完成
一.公众号注册 此处比较简单不做过多陈述(个人需要身份证号和300RMB,企业需要企业注册证书和企业法人证件),公众号每年一审,每次年审需要300RMB,提交信息自己官网一步步点击就可知道. 二.公众 ...
- 微信公众号开发系列-获取微信OpenID
在微信开发时候在做消息接口交互的时候需要使用带微信加密ID(OpenId),下面讲讲述2中类型方式获取微信OpenID,接收事件推送方式和网页授权获取用户基本信息方式获取. 1.通过接收被动消息方式获 ...
- java微信公众号开发教程_微信公众平台开发教程(java版本含代码) 中文PDF版 3.13MB...
本文档将对即将推出的微信公众帐号开发系列连载教程做简单的说明. 教程主要是面向有一定 Java 编程基础的朋友, 目录: 微信公众帐号开发教程第 1 篇-引言 2 微信公众帐号开发教程第 2 篇-微 ...
- 微信公众号开发之绑定微信开发者
第一步:登录微信公众号,绑定网页开发者 在登录后的界面中,我们向下拉在左侧会看到有一个"开发者工具"点击. 这时在开发者工具中,会看到有好几个工具,其中有一个"web开发 ...
- 微信公众号开发，清除微信内置浏览器缓存
在做微信开发的时候(主要是微信内网页或者比较大型的手机网站)的时候,更改了页面代码,但是微信内置浏览器有缓存,还是之前的效果,影响调试,而且还死活清除不掉!!!!!怎么办? 我的第一想法是关闭手机的微 ...
- JAVA微信公众号开发第11微信发红包
#简介 现金红包,是微信支付商户平台提供的营销工具之一,上线以来深受广大商户与用户的喜爱.商户可以通过本平台向微信支付用户发放现金红包.用户领取红包后,资金到达用户微信支付零钱账户,和零钱包的其他资金 ...
- php微信公众号开发入门,PHP微信公众号开发入门（二）
好了,上一篇已经介绍到了如何成为一个微信开发者,并且简单介绍了如何获取和发送简单的文本信息,这次就来介绍一下其他类型数据的接收和发送方式. 我们可以通过微信端给我们发送来的xml来判断用户发送消息的类 ...
- 微信公众号开发之获取微信用户的openID
(注:openID同一用户同一应用唯一,UnionID同一用户不同应用唯一.不同应用指微信开放平台下的不同用户.) 1. 申请测试号(获得appID.appsecret) 2. 填写服务器配置并验 ...
最新文章
- 从2D到3D的目标检测综述
- java的知识点32——多线程 并发同步的 性能分析、快乐影院 订票操作
- oracle 创建临时表报权限不足,ORACLE 临时表空间满了的原因解决方案
- mysql 事务 锁 并发
- 流与文件 java_java流与文件处理,请看代码:
- WINCE驱动程序快速入门
- iangularjs 模板,AngularJS模板中的三元运算符
- thymealf 高级用法_Thymeleaf
- 使用分页方式读取超大文件的性能试验
- 在js中访问html页面,javascript – 在IE9的html页面中访问js里面的全局函数
- 矩阵连乘最佳加括号方式－动态规划算法
- 大数据面试3分钟自我介绍_大数据开发工程师面试主要面试内容
- 设计模式-第一篇之单例模式
- 高性能mysql学习笔记一
- 英语模板作文，词组，句子，句型，开头
- 微信开放平台申请方法与用途
- maven 打jar包：mvn clean package
- 我的文档 属性设置里找不到位置选项，以及目录迁移解决方案
- Pytorch CPU Tensor与GPU Tensor的运算速度对比测试
- 如何优化关键词搜索排名（提升关键词排名的方法）