前些日子接到一个需求 要在微信h5 做一个多图片上传的功能;我寻思这还不简单么;
百度的多图上传拿过来,结果 不好使.............................(ios可以,安卓只能每次选一张)
那继续直接换weui , 结果还是不好使............................(ios可以,安卓只能每次选一张)
但是确实有人实现了这个功能 !!!
后来修改了下 思路 用微信官方的 拍照上传功能
获取素材的 url 微擎版本为
$media_id = $serid;//提交过来的serverId即$media_id
$account_api = WeAccount::create();
$result = $account_api->downloadMedia($media_id);
下边是jq的处理 上传素材以及删除
wx.config({
debug: false,
appId: "",
timestamp: "",
nonceStr: "",
signature: "",
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'chooseImage',
'uploadImage',
'downloadImage'
]
});
wx.ready(function () {
$('.uploadImage').on('click', function () {
wx.chooseImage({
success: function (res) {
var localIds = res.localIds;
syncUpload(localIds);
}
});
});
var syncUpload = function(localIds){
var localId = localIds.pop();
wx.uploadImage({
localId: localId,
isShowProgressTips: 1,
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
var str = $('#img_str').val()+serverId+',';
// $('.imglist').append("
})
$("#sb").click(function(){
var imglist = $(".imglist").html();
if(imglist == "" || imglist == null) {
alert("请添加图片");
return false;
} else {
if($(".imglist").find('img').size() >9) {
alert("图片只允许上传9张!");
return false;
}
var img_str = $('#img_str').val();
}
// alert(img_str);
// $.post("http://sign.endclass.cn/app/index.php?i=3&c=entry&do=Getmedia&m=card_recover", {img_str:img_str},function(data){
// // window.location.href = "__URL__/test";
// alert(data);
// });
});
function aaa(value) {
console.log(value);
$("#"+value).parent().css("display", "none");
var img_str = $('#img_str').val();
img_str=img_str.replace(value+",","");
$("#img_str").val(img_str);
$("#upload_button").css("display", "block");
}