微信公众号js-sdk上传图片
接口说明可以参考微信公众号开放文档
效果图如下:
代码如下:
需要的js:
<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<img id="img0" width="300px" height="300px">
<img id="img1" width="60px" height="60px">
<img id="img2" width="60px" height="60px">
<input type="button" onclick="getWxChooseImage()" value="上传图片">
<input type="button" onclick="upload()" value="提交">
getWxJSSDK()
var imgArray=new Array()
//获取微信sdkConfig
function getWxJSSDK(){
// 拿到当前页面url
var thisPageUrl = location.href;
$.ajax({
url: "url",
type: "post",
dataType: "json",
data: {
"url": thisPageUrl,
},
success: function (result) {
wx.config({
debug: false,
appId: result.appId,
timestamp: result.timestamp,
nonceStr: result.nonceStr,
signature: result.signature,
jsApiList: ['openLocation', 'getLocation','chooseImage',
'previewImage',
'uploadImage',
'downloadImage' ]
});
},
error: function (err) {
console.log("fail");
}
});
}
function getWxChooseImage(){
wx.chooseImage({
count: 3, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
console.log(res)
console.log(res.localIds.length)
for (let i = 0; i < res.localIds.length; i++) {
// 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
var localIds = res.localIds[i];
wx.getLocalImgData({
localId: localIds, // 图片的localID
success: function (res) {
// localData是图片的base64数据,可以用img标签显示
var localData = res.localData;
$("#img"+i).attr("src",localData)
imgArray[i]=localData;
}
});
}
}
});
}
上面是用数组保存了图片的base64数据,这里有个坑,用微信开发者工具测试的可以显示出图片,用手机测试就显示不出照片,需要修改一下上面的代码,如下:
$("#img"+i).attr("src","data:image/jpg;base64,"+localData)
然后就是将数据发送给后台,用ajax得加个字段traditional=true,如下:
$.ajax({
url: "url",
type: "POST",
traditional:true,
async: true,
dataType: "text",
data: {
imgArray:imgArray
},
success: function (data) {
}
});
weui上传图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="../../css/weui.css"/>
<link rel="stylesheet" href="../../css/weuix.css"/>
<script src="../../js/zepto.min.js"></script>
<script src="../../js/zepto.weui.js"></script>
<script>
$(function(){
var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>';
var $uploaderInput = $("#uploaderInput"); //上传按钮+
var $uploaderFiles = $("#uploaderFiles"); //图片列表
var $galleryImg = $(".weui-gallery__img");//相册图片地址
var $gallery = $(".weui-gallery");
$uploaderInput.on("change", function(e){
var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
$uploaderFiles.append($(tmpl.replace('#url#', src)));
}
});
$uploaderFiles.on("click", "li", function(){
$galleryImg.attr("style", this.getAttribute("style"));
console.log(this)
$gallery.fadeIn(100);
});
$gallery.on("click", function(){
$gallery.fadeOut(100);
});
});
</script>
</head>
<body ontouchstart>
<div class="page-hd">
<h1 class="page-hd-title">
图片上传和预览压缩
</h1>
<p class="page-hd-desc">需要加载lrz.min.js压缩插件</p>
</div>
<div class="page-bd-15">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片预览</p>
<div class="weui-uploader__info">0/2</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file" style="background-image:url(../../img/add.png)"></li>
<li class="weui-uploader__file" style="background-image:url(../../img/add.png)"></li>
<li class="weui-uploader__file" style="background-image:url(../../img/add.png)"></li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../../img/add.png)">
<div class="weui-uploader__file-content">
<i class="weui-icon-warn"></i>
</div>
</li>
<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(../../img/add.png)">
<div class="weui-uploader__file-content">50%</div>
</li>
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" accept="image/*" multiple="" type="file">
</div>
</div>
</div>
<div class="weui-gallery" style="display: none">
<span class="weui-gallery__img"></span>
<div class="weui-gallery__opr">
</div>
</div>
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">单图上传,非压缩,通过POST上传</p>
<div class="weui-uploader__info">0/2</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files">
</ul>
<div class="weui-uploader__input-box">
<input class="weui-uploader__input" accept="image/*" multiple="" type="file" onchange="previewImage(this)">
</div>
</div>
<script>
function previewImage(file) {
var MAXWIDTH = 1000;
var MAXHEIGHT = 1200;
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function (evt) {
console.log(evt.target.result)
$.post("url",{imgbase64: evt.target.result},function(rs){
$(file).parent().prev().html('<li οnclick="removeimg(this)" class="weui-uploader__file" style="background-image:url('+evt.target.result+')"></li>');
},'json');
};
reader.readAsDataURL(file.files[0]);
console.log(file.files[0]);
}
}
</script>
</div>
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">多图上传,非压缩,使用POST上传</p>
<div class="weui-uploader__info">0/2</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files">
</ul>
<div class="weui-uploader__input-box">
<input class="weui-uploader__input" accept="image/*" multiple="" type="file" onchange="previewImages(this)">
</div>
</div>
<script>
function removeimg(obj){
$.confirm('您确定要删除吗?', '确认删除?', function() {$(obj).remove();});
return false;
}
function previewImages(file) {
var MAXWIDTH = 1000;
var MAXHEIGHT = 1200;
for (var i = 0; i < file.files.length; i++) {
if (file.files && file.files[i]) {
var reader = new FileReader();
reader.onload = function (evt) {
console.log(evt.target.result)
$.post("url",{imgbase64: evt.target.result},function(rs){
$(file).parent().prev().append('<li οnclick="removeimg(this)" class="weui-uploader__file" style="background-image:url('+evt.target.result+')"></li>');
},'json');
};
reader.readAsDataURL(file.files[i]);
console.log(file.files[i]);
}
}
}
</script>
</div>
</div>
<br>
<br>
</body>
</html>
weui这个是官网的例子,代码中post请求时imgbase64: evt.target.result这个就是图片base64数据,示例中是直接就上传了,也可以用wx js-sdk的方式,先存储图片数据,再用ajax发送。效果图:
weui选择图片的删除是单击图片弹出提示删除,预览的图片是单击放大图片,关于放大和删除还没研究,wx js-sdk删除是需要图片覆盖之前的,后续再优化吧,现在记录下遇到的坑