jqweui 加微信图片上传接口实现图片上传
jqweui简介
jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。
下载地址 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>
//调用微信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: [
// 所有要调用的 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;
// 已选图片个数
var length = localIds.length;
// 执行图片上传
upload();
function upload() {
if(ios) {
wx.getLocalImgData({
localId: localIds[i], // 图片的localID
success: function (res) {
localData = res.localData; // localData是图片的base64数据，可以用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();//执行上传动画
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();//执行上传动画
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
未完待续---
