微信js sdk上传多张图片,微信上传多张图片

该案例已tp3.2商城为例

直接上代码:

php代码:

 public function ind(){
$appid="11111111111111111111";
$secret="11111111111111111111";
$token = S('access_token');
if (!$token) {
$res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=11111111111111&secret=11111111111111111111111111");
$res = json_decode($res, true);
$token = $res['access_token'];
// 注意:这里需要将获取到的token缓存起来(或写到数据库中)
// 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token,每日有次数限制
// 通过此接口返回的token的有效期目前为2小时。令牌失效后,JS-SDK也就不能用了。
// 因此,这里将token值缓存1小时,比2小时小。缓存失效后,再从接口获取新的token,这样
// 就可以避免token失效。
// S()是ThinkPhp的缓存函数,如果使用的是不ThinkPhp框架,可以使用你的缓存函数,或使用数据库来保存。
S('access_token', $token, 3600);
}
$ticket = S('wx_ticket');
if(!$ticket) {
$tokinfo = file_get_contents("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$token&type=jsapi");
$tokinfo = json_decode($tokinfo, true);
$ticket=$tokinfo['ticket'];
S('wx_ticket', $ticket, 3600);
}
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if($ticket){
$timestamp = time();
$wxnonceStr = "abcdefghijklmnopqrstuvw";
$wxticket = $ticket;
$wxOri = "jsapi_ticket=$wxticket&noncestr=$wxnonceStr&timestamp=$timestamp&url=$url";
$wxSha1 = sha1($wxOri);
$this->assign("token",$token);
$this->assign("timestamp",$timestamp);
$this->assign("wxnonceStr",$wxnonceStr);
$this->assign("wxshal",$wxSha1);
}
}

模板中的js代码:

  // 微信配置
var token="{$token}";
var timestamp="{$timestamp}";
var wxnonceStr = "{$wxnonceStr}";
var wxshal = "{$wxshal}";
wx.config({
debug: false,
appId: "wx978a1c1edb5fea34",
timestamp: "{$timestamp}",
nonceStr: "{$wxnonceStr}",
signature: "{$wxshal}",
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','chooseImage','previewImage','uploadImage','downloadImage'] // 功能列表,我们要使用JS-SDK的什么功能
});
var serverids=[];
var leng=0;
var syncUpload = function(localIds){
myApp.hidePreloader();
myApp.showPreloader();
var localId = localIds.pop();
wx.uploadImage({
localId: localId,
isShowProgressTips:0,
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID
serverids.push(serverId);
//其他对serverId做处理的代码
if(localIds.length > 0){
syncUpload(localIds);
}
if(leng==serverids.length){
var json = {};
for(var i=0;i<serverids.length;i++)
{
json[i]=serverids[i];
}
var serids=JSON.stringify(json);
$.ajax({
type : "post",
url : "/H5/index/downloadMedia",
data : {mediaid:serids} ,
dataType:"json",
async : false,
success : function(response){
myApp.hidePreloader();
$.each(response.image,function (k,v) {
var contentUl = SetImgBox(v);
$(".img_box").append(contentUl);
})
myApp.hidePreloader();
alert("上传成功!");
//alert(response.image[0])
//$(".ago").attr("src",response.image[0])
}
});
}
}
});
};
$(function () {
wx.ready(function () {
// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
$("#contentid").click(function () {
var ileng=$("#imglength li").length;
var wleng=9+1-ileng;
var that = $(this);
wx.chooseImage({
count: wleng, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
leng = localIds.length;
syncUpload(localIds); //上传代码图片就在此直接调用
}
});
})
})
})

php 服务器接收的代码:

 public function downloadMedia() {
$mediaId=$_POST["mediaid"];
$appid="11111111111111111111";
$secret="222222222222222222222222222";
$mediaId = json_decode($mediaId);
$token = S('access_token');
$imgs=array();
if (!$token) {
$res = file_get_contents("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=11111111111111111111&secret=11111111111111111111111111111");
$res = json_decode($res, true);
$token = $res['access_token'];
// 注意:这里需要将获取到的token缓存起来(或写到数据库中)
// 不能频繁的访问https://api.weixin.qq.com/cgi-bin/token,每日有次数限制
// 通过此接口返回的token的有效期目前为2小时。令牌失效后,JS-SDK也就不能用了。
// 因此,这里将token值缓存1小时,比2小时小。缓存失效后,再从接口获取新的token,这样
// 就可以避免token失效。
// S()是ThinkPhp的缓存函数,如果使用的是不ThinkPhp框架,可以使用你的缓存函数,或使用数据库来保存。
S('access_token', $token, 3600);
}
foreach ($mediaId as $key=>$value){
$nfilename = date('YmdHis').get_rand_str(6);
$day=date("Y");
$dam=date("m");
$updir = './Public/trade/'.$day.'/'.$dam.'/';
$updir2 = '/Public/trade/'.$day.'/'.$dam.'/';
if (!is_dir($updir)){
//第三个参数是“true”表示能创建多级目录,iconv防止中文目录乱码
$res=mkdir(iconv("UTF-8", "GBK", $updir),0777,true);
if (!$res){
$this->error = "目录 $updir 创建失败";
return false;
// $this->output_error("目录 $updir 创建失败");
}
}
$med=$value;
$content = file_get_contents("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=$token&media_id=$med");
$filename = "$updir/$nfilename.jpg";
$file2="$updir2/$nfilename.jpg";
file_put_contents($filename, $content);
array_push($imgs,$file2);
}

微信js sdk上传多张图片的更多相关文章

  1. 微信小程序上传多张图片,及php后台处理

    微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{wi ...

  2. 微信JS图片上传与下载功能--微信JS系列文章(三)

    概述 在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){ v ...

  3. 微信小程序-上传多张图片加进度条(支持预览、删除)

    2018-12-24 详情示例见:https://www.cnblogs.com/cisum/p/9564898.html 2018-12-29 组件下载见:https://www.cnblogs.c ...

  4. 微信JSSDK上传多张图片

    之前是使用for循环实现的,但是安卓手机没有问题,苹果手机只能上传最后一张图片. 好在有高手在前面趟路,实用的循环调用.苹果是没有,安卓不清楚.以下内容转自:http://leo108.com/pid ...

  5. javascript jssdk微信上传一张图片的方法

    javascript jssdk微信上传一张图片的方法 <pre> wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'co ...

  6. 整理几个js上传多张图片的效果

    一.普通的上传图片,张数不限制 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"&g ...

  7. 如何在IPFS里面上传一张图片

    之前有好几人问过小编,想在IPFS里面上传一张图片.如何做? 今天小编就讲一下如何在IPFS里面上传.下载文件? 1 下载IPFS软件 下载地址:https://dist.ipfs.io/#go-ip ...

  8. JS图片上传预览插件制作(兼容到IE6)

    其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...

  9. 实战微信JS SDK开发:贺卡制作与播放(1)

    前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

随机推荐

  1. [SQL Service]从一张表取值更新另一张表字段

    1. update table_A set  table_A_column = ab.column from table_A aa left join table_B ab on aa.xx = ab ...

  2. 【解题报告】 洛谷 P3492 [POI2009]TAB-Arrays

    [解题报告] 洛谷 P3492 [POI2009]TAB-Arrays 这题是我随机跳题的时候跳到的.写完这道题之后,顺便看了一下题解,发现只有一篇题解,所以就在这里顺便写一个解题报告了. 首先当然是 ...

  3. JDK5-8特性归纳

    jdk5新特性1.自动装箱和拆箱2.枚举3.静态导入4.可变参数5.內省   是Java语言对Bean类属性.事件的一种缺省处理方法.例如类A中有属性那么,那我们可以通过getName,setName ...

  4. 面试:A

    分析 System.Collections.Generic.List<T> 的 Remove<T> 方法和 Clear 方法的实现细节(不允许使用“移除”“清除”这种概念模糊的 ...

  5. 快速搭建vue2.0+boostrap项目

    一.Vue CLI初始化Vue项目 全局安装vue cli npm install --global vue-cli 创建一个基于 webpack 模板的新项目 vue init webpack my ...

  6. Django - 日志工作中常用配置

    工作中常用配置 # 日志配置 BASE_LOG_DIR = os.path.join(BASE_DIR, "log") LOGGING = { 'version': 1, # 保留 ...

  7. noip模拟赛 gcd

    题目更正:输出的a<b. 分析:这是一道数学题,范围这么大肯定是有规律的,打个表可以发现f(a,b)=k,a+b最小的a,b是斐波那契数列的第k+1项和k+2项.矩阵快速幂搞一搞就好了. #in ...

  8. Binary search tree system and method

    A binary search tree is provided for efficiently organizing values for a set of items, even when val ...

  9. dba 和 rdba 转载

    一.  DB(Data block)   A data block is the smallest unit of storage in an Oracle database. Every datab ...

  10. python 执行环境

    一些函数 执行其它非python程序 1 一些函数 callable callable()是一个布尔函数,确定一个对象是否可以通过函数操作符(())来调用.如果函数可调用便返回True,否则便是Fal ...