微信的上传以及下载图片可以有两种方式，一种是通过后台代码，HttpClient类将图片post到指定的url，但这种方式对订阅号来说是不被允许的（无奈T_T）；另一种方式是通过jssdk在前端上传图片（这种方式仅限于手机页面，而且必须要在微信里面打开网页）；对于一个只有订阅号的可怜程序猿，今天我跟大家分享一下如何使用这个上传以及下载图片的jssdk。当然，其实两种图片上传的方式我都会的（嘿嘿*^_^*），但对于第一种方法，我在这里就先买个关子，望大家勿怪~~~~~~
废话不多讲，下面先说说步骤：
1、先登陆微信公众平台，然后在：公众号设置 --> 功能设置 里面找到 “js接口安全域名”这个选项，然后在里面设置自己的域名。这里需要注意的是，这个一定要是域名，IP地址是不被允许的。
2、设置好了js安全域名之后，需要在自己的页面里面引入一个js：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
3、接下来就是在页面启动的时候注入权限验证配置，前端代码非常简单，但这里面后端代码也是不少的：
$(function () { var json = { debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: "", // 必填，公众号的唯一标识 timestamp: "", // 必填，生成签名的时间戳 nonceStr: "", // 必填，生成签名的随机串 signature: "",// 必填，签名，见附录1 jsApiList: ['previewImage', 'chooseImage', 'uploadImage', 'downloadImage'] //'uploadImage', 'downloadImage'// 必填，需要使用的JS接口列表，所有JS接口列表见附录2) }; wx.config(json); wx.ready(function () { // 权限验证成功 }); wx.error(function (data) { console.info(data);// 权限验证失败 }); });
先说说这里面的参数吧，appId这个无须多讲，timestamp就是一个时间戳，nonceStr是随机字符串，这两个参数可以随便搞，关键是signature这个参数，这个参数的生成过程是：获取access_token，根据access_token获取jsapi ticket，然后将这个jsapi ticket以及上面两个参数timestamp、nonceStr还有当前页面的url组合成一个新的字符串，组合方法如下：
string str = "jsapi_ticket={0}&noncestr={1}×tamp={2}&url={3}";
这里面的“{0}”-“{3}”分别指代jsapiticket、nonceStr、timestamp以及当前页面url这几个参数，值得注意的是，如果当前页面是带参数的，这个参数也是要组合到这个字符串里面的。
好了，组合成这个新的字符串之后，对其进行sha1加密即可。
由于jsapi ticket以及access_token都是不能无上限获取的，而且它们的有效时间都是7200秒，所以要对这两个字符串进行全局缓存。
最后一个参数：jsApiList就是你要申请使用的jssdk接口了。
下面贴上获取signature的后端代码：
/// <summary> /// 生成jsapi验证秘钥 /// </summary> /// <param name="jsDomainName">绑定的js安全域名</param> /// <param name="nonce">随机字符串</param> /// <param name="timestamp">时间</param> /// <returns></returns> public string GetSignTure(string jsDomainName, out string nonce, out string timestamp) { nonce = Cryptography.GetNonce(null); timestamp = GetTimestamp(); string ticket = GetJsApiTicket().Result;//获取jsapiticket string str = "jsapi_ticket={0}&noncestr={1}×tamp={2}&url={3}"; str = string.Format(str, ticket, nonce, timestamp, jsDomainName); return Sha1(str); } private static RequestResult<string> GetJsApiTicket(string appId) { RequestResult<string> result = new RequestResult<string>(); try { NetworkHelp instance = NetworkHelp.GetInstance(); string format = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={0}&type=jsapi"; string str2 = GetAccessToken().Result; format = string.Format(format, str2); Dictionary<string, string> dictionary = instance.GetStringResult(format).SimpleJsonDes(); string str4 = ""; if (dictionary.TryGetValue("ticket", out str4)) { result.IsSuccess = true; result.Result = str4.ToString(); long timestamp = DateTime.Now.AddSeconds(7100.0).GetTimestamp(); HashTableCache.Add(appId + "_jsapi", str4, timestamp); return result; } result.IsSuccess = false; if (dictionary.TryGetValue("errcode", out str4)) { result.ErrorCode = str4.ToString(); } if (dictionary.TryGetValue("errmsg", out str4)) { result.ErrorMessage = str4.ToString(); } } catch (Exception exception) { result.IsSuccess = false; result.Result = exception.ToString(); } return result; }
4、因为开了debug模式，所以如果权限验证成功，网页是会有弹出提示的，当然验证失败也是会有弹出提示的。提示如下：
5、接下来就是写自己的点击事件了，这里面写了三个点击事件，分别是：选择图片、上传图片以及下载图片，代码如下：
<script type="text/javascript">
var localIds = null;
var serviceId = null;
$(function () {
var json = {
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: "@(appId)", // 必填，公众号的唯一标识
timestamp: "@(timestamp)", // 必填，生成签名的时间戳
nonceStr: "@(nonce)", // 必填，生成签名的随机串
signature: "@(signture)",// 必填，签名，见附录1
jsApiList: ['previewImage', 'chooseImage', 'uploadImage', 'downloadImage'] //'uploadImage', 'downloadImage'// 必填，需要使用的JS接口列表，所有JS接口列表见附录2)
};
wx.config(json);
wx.ready(function () {
});
wx.error(function (data) {
console.info(data);
});
//选择图片
$("#btnChooseImg").click(function () {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
//wx.previewImage();
if (localIds.length > 0) {
var arr = localIds[0];
$("#tab_imgList").attr("src", arr);
}
}
});
});
//上传图片
$("#btnUpload").click(function () {
if (localIds != null && localIds != "") {
var idArr = localIds;
var i = 0;
var html = "";
do {
var id = idArr[i];
wx.uploadImage({
localId: id, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
serverId = res.serverId; // 返回图片的服务器端ID
if (serverId) {
serviceId = serverId;
}
}
});
i++;
} while (i < idArr.length);
alert(html);
} else {
alert("请先选择照片！");
}
});
//下载图片
$("#btnDownload").click(function () {
if (serviceId == null || serviceId == "") {
alert("请先上传图片！");
return;
}
alert(serviceId);
wx.downloadImage({
serverId: serviceId, // 需要下载的图片的服务器端ID，由uploadImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var localId = res.localId; // 返回图片下载后的本地ID
alert(localId);
$("#downLoadImg").attr("src", localId);
}
});
});
});
</script>
6、基本工作已经完成，接下来是实践时刻：
首先试试预览图片：
妥妥地进入了预览图片窗口，不过遗憾的是只能选择一张图片囧...
选择图片之后：
这里面的localIds是一个字符串数组，通过将这个数组里面的字符串设置到img标签的src属性里面是可以在网页上面看到这个图片的，效果如下：
然后点击上传按钮，它会弹出一个加载中的图片，这时候需要点耐心，上传成之后，会弹出来如下信息：
上传已经成功了，然后我们测试一下下载功能，这时候也是会弹出来一个加载中的图片，耐心点咯，成功之后会弹出如下信息：
希望大家不要在意界面......
微信开发其实是很简单的，作为一个互联网巨头，TX已经把这些接口封装得很好了，也有相应的API可以查，作为一个开发者，在调用这些第三方的API的时候，最重要的是细心、细心再细心。
最后说明一下，整个项目的源代码在本人的“微信开发之自动回复”这篇文章里面是可以下载得到的，包括本人后续系列的有关微信方面的分享都可以在里面找到源代码。
使用这项目的时候，只需要在web.config里面配置好相关的账号信息即可。如下图：
另外，如有问题，欢迎大家的指正。