微信的上傳以及下載圖片可以有兩種方式，一種是通過后台代碼，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里面配置好相關的賬號信息即可。如下圖：
另外，如有問題，歡迎大家的指正。