jqweui 加微信圖片上傳接口實現(xiàn)圖片上傳
jqweui簡介
jQuery WeUI 是專為微信公眾賬號開發(fā)而設(shè)計的一個簡潔而強大的UI庫，包含全部WeUI官方的CSS組件醉鳖，并且額外提供了大量的拓展組件，豐富的組件庫可以極大減少前端開發(fā)時間秉继。
下載地址 github
首先在頁面中需要引入一下js和css
//jqweui css
<link rel="stylesheet" href="lib/weui.min.css">
<link rel="stylesheet" href="css/jquery-weui.css">
<link rel="stylesheet" href="css/demos.css">
<link rel="stylesheet" href="css/style.css">
//jqweui 的js
<script src="lib/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="lib/fastclick.js"></script>
//調(diào)用微信jsApi接口需要的js
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js">
</script>
html代碼
<div class="weui-cells weui-cells_form">
<div class="weui-cells__title">
圖片上傳2
</div>
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles1">
</ul>
<div class="weui-uploader__input-box" id="chosse">
</div>
</div>
</div>
</div>
</div>
</div>
初始化微信接口
//初始化配置
wx.config({
debug: false,
appId: "{$sign['appId']}",
timestamp: "{$sign['timestamp']}",
nonceStr: "{$sign['nonceStr']}",
signature: "{$sign['signature']}",
jsApiList: [
// 所有要調(diào)用的 API 都要加到這個列表中
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
]
});
js代碼
$('#chosse').click( function() {
// 用來判斷是不是ios
var ios = window.__wxjs_is_wkwebview;
// 選擇圖片
wx.chooseImage({
count:4, //一次允許選擇幾張圖片
success: function (res) {
var localIds = res.localIds;
var i = 0;
// 已選圖片個數(shù)
var length = localIds.length;
// 執(zhí)行圖片上傳
upload();
function upload() {
if(ios) {
wx.getLocalImgData({
localId: localIds[i], // 圖片的localID
success: function (res) {
localData = res.localData; // localData是圖片的base64數(shù)據(jù)祈噪，可以用img標簽顯示
// 展示預覽圖
var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('+localData+')" imgurl = "'+localData+'"><div class="weui-uploader__file-content">0%</div></li>');
$('#uploaderFiles1').append($preview);
// 預覽
$('.weui-uploader__file').click(function(){
var imgurl = $(this).attr('imgurl');
wx.previewImage({
current: imgurl, // 當前顯示圖片的http鏈接
urls: [imgurl] // 需要預覽的圖片http鏈接列表
});
});
// 上傳動畫
var progress = 0;
function uploading() {
progress = progress + 3;
$preview.find('.weui-uploader__file-content').text(progress + '%');
if (progress < 95 ) {
setTimeout(uploading, 10);
}
}
uploading();//執(zhí)行上傳動畫
wx.uploadImage({
localId: localIds[i].toString(), // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 0, // 默認為1秕噪，顯示進度提示
success: function (res) {
if (i == length) {
$.toast("上傳成功");
}
i++;
$preview.removeClass('weui-uploader__file_status');
// 上傳成功
var server_id = $("input[name='server_id']");
if (server_id.val() == '') {
server_id.val(res.serverId);
} else {
var str = server_id.val() + ',' + res.serverId;
server_id.val(str);
}
// 多張圖片先判斷還有沒有要上傳的
if (i < length) {
upload();
}
}
});
}
});
} else {
localData = localIds[i];
// 展示預覽圖
var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('+localData+')" imgurl = "'+localData+'"><div class="weui-uploader__file-content">0%</div></li>');
$('#uploaderFiles1').append($preview);
$('.weui-uploader__file').click(function(){
var imgurl = $(this).attr('imgurl');
wx.previewImage({
current: imgurl, // 當前顯示圖片的http鏈接
urls: [imgurl] // 需要預覽的圖片http鏈接列表
});
});
// 上傳動畫
var progress = 0;
function uploading() {
progress = progress + 3;
$preview.find('.weui-uploader__file-content').text(progress + '%');
if (progress < 95 ) {
setTimeout(uploading, 10);
}
}
uploading();//執(zhí)行上傳動畫
wx.uploadImage({
localId: localData.toString(), // 需要上傳的圖片的本地ID钳降，由chooseImage接口獲得
isShowProgressTips: 0, // 默認為1，顯示進度提示
success: function (res) {
i++;
$.toast("上傳成功");
$preview.removeClass('weui-uploader__file_status');
// 上傳成功把server_id拼接起來再控制器保存到本地
var server_id = $("input[name='server_id']");
if (server_id.val() == '') {
server_id.val(res.serverId);
} else {
var str = server_id.val() + ',' + res.serverId;
server_id.val(str);
}
// 多張圖片先判斷還有沒有要上傳的
if (i < length) {
upload();
}
}
});
}
}
}
});
});
看效果
微信圖片_20171204184603.jpg
微信圖片_20171204184612.jpg
未完待續(xù)---
