<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="../js/base/jquery-3.1.1.min.js"></script>
<script src="../js/base/src.js"></script>
<script src="../js/base/http.js"></script>
<title>Title</title>
<style>
*{margin: 0;padding: 0}
p{
padding: 20px;
background: red;
color: #fff;
text-align: center;
font-size: 14px;
}
li{
font-style: normal;
display: inline-block;
border:1px solid blue;
margin: 10px;
}
img{height: 200px}
input{margin:30px}
</style>
</head>
<body>
<div>
<p>上傳</p>
<div class="box"></div>
<input type="submit" id="submit">
</div>
<script>
// AJAX請求微信配置
function getWxData() {
var wxUrl=window.location.href;
var url = http + "wx/offAct/jssdkCon";
var data={
"url":wxUrl,
"org":"xn"
};
// console.log(wxUrl)
httpHelper.post(url, data, function(data){
var appId = data['data']["appId"];
var timestamp = data['data']['timestamp'];
var nonceStr = data["data"]['nonceStr'];
var signature = data['data']['signature'];
var jsApiList = data['data']['jsApiList'];
var beta=data['data']['beta'];
var debug=data['data']['debug'];
// console.log(data)
// alert(JSON.stringify(data))
wx.config({
beta: beta,// 必須這么寫，否則wx.invoke調用形式的jsapi會有問題
debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: appId, // 必填，企業微信的corpID
timestamp: timestamp, // 必填，生成簽名的時間戳
nonceStr: nonceStr, // 必填，生成簽名的隨機串
signature: signature,// 必填，簽名，見附錄1
jsApiList:jsApiList ,// 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
});
}
getWxData();//微信
// 上傳預覽多張圖片
$('p').on('click',function () {
$('box').empty()
var that = $(this);
// 選擇圖片
wx.chooseImage({
count: 9,
needResult: 1,
sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['camera','album'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (data) {
var localIds = data.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片
// 判斷設備
var xt = navigator.userAgent;
if(xt.indexOf("OS") > -1){
// ios蘋果轉base64顯示
for(let j=0;j<localIds.length;j++){
// alert(localIds.length)
wx.getLocalImgData({
localId: localIds[j], // 圖片的localID
success: function (res) {
localIds = res.localData; // localData是圖片的base64數據，可以用img標簽顯示
// alert(JSON.stringify(localIds))
// alert(1)
var html="",ht="",ml="";
if(localIds==1){
ht="<li><img src='"+res.localData+"' alt=''></li>"
}else {
ml+="<li><img src='"+res.localData+"' alt=''></li>"
}
html+=ht+ml;
$('.box').append(html);
funcReadImgInfo();//點擊查看大圖
// alert(JSON.stringify(result1))
},
fail: function (res) {
// alert("請聯系開發人員")
alert(JSON.stringify(res))
}
});
}
}else {
// 安卓android
var html,ht,ml;
if(localIds==1){
ht="<li><img src='"+res.serverId+"' ></li>"
}else {
ml+="<li><img src='"+res.serverId+"'></li>"
}
html+=ht+ml
$('.box').append(html);
funcReadImgInfo()//點擊查看大圖
}
syncUpload(localIds)
},
fail: function (res) {
alert("請聯系開發人員")
//alert(JSON.stringify(res))
}
});
});
//點擊查看大圖
function funcReadImgInfo() {
var imgs = [];
var imgObj = $(".box img");//這里改成相應的對象
for (var i = 0; i < imgObj.length; i++) {
imgs.push(imgObj.eq(i).attr('src'));
imgObj.eq(i).click(function () {
var nowImgurl = $(this).attr('src');
//alert(nowImgurl)
// alert(JSON.stringify(result1))
WeixinJSBridge.invoke("imagePreview", {
"urls": imgs,
"current": nowImgurl
});
});
}
}
// 最后傳給后台服務器數組 -->list
var list=[]
var syncUpload = function(localIds) {
var localId = localIds.pop();
wx.uploadImage({
localId: localId.toString(), // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 1, // 默認為1，顯示進度提示
success: function (res) {
//res.serverId 返回圖片的服務器端ID
list.push(res.serverId);
//alert(JSON.stringify(list))
if (localIds.length > 0) {
window.setTimeout(function () {
syncUpload(localIds);
}, 100);
} else {
window.setTimeout(function () {
downloadImage(0);
}, 100);
}
}
})
};
// 提交
$('#submit').on('click',function () {
alert(JSON.stringify(list))
})
</script>
</body>
</html>
微信JSSDK上傳多圖預覽，點擊查看大圖
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。