JSSDK图像接口多张图片上传下载并将图片流写入本地

<span style="font-size: 14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>发布图片</title>
<meta name="viewport" content="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 name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css">
</head>
<body>
<p>最多可添加9张作品</p>
<input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片" style="display:none;" />
<div class="imglist"></div>
<input type="hidden" id="img_str" name="img_str">
<a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a>
<div class="sb">发布</div>
<script type="text/javascript" src="/Public/Weixin/js/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
debug: false,
appId: '{$signPackage["appid"]}',
timestamp: {$signPackage["timestamp"]},
nonceStr: '{$signPackage["noncestr"]}',
signature: '{$signPackage["signature"]}',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'chooseImage','previewImage','uploadImage','downloadImage'
]
});
wx.ready(function () {
// 5.3 上传图片
$('.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("<img src='"+localId+"' />");
$('#img_str').val(str);
//其他对serverId做处理的代码
if(localIds.length > 0){
syncUpload(localIds);
}
if($('.imglist img').size() >= 9) {
$("#upload_button").hide();
}
},
fail: function (res) { alert(JSON.stringify(res)); }
});
};
});
</script>
<script>
$(".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();
}
$.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){
window.location.href = "__URL__/test";
});
});
</script>
</body>
</html></span>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>发布图片</title>

<meta name="viewport" content="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 name="format-detection" content="telephone=no">

<link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css">

</head>

<body>

<p>最多可添加9张作品</p>

<input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:none;" />

<div class="imglist"></div>

<input type="hidden" id="img_str" name="img_str">

<a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a>

<div class="sb">发布</div>

<script type="text/javascript" src="/Public/Weixin/js/jquery.min.js"></script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script>

wx.config({

debug: false,

appId: '{$signPackage["appid"]}',

timestamp: {$signPackage["timestamp"]},

nonceStr: '{$signPackage["noncestr"]}',

signature: '{$signPackage["signature"]}',

jsApiList: [

// 所有要调用的 API 都要加到这个列表中

'chooseImage','previewImage','uploadImage','downloadImage'

]

});

wx.ready(function () {

// 5.3 上传图片

$('.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("<img src='"+localId+"' />");

            $('#img_str').val(str);

	    //其他对serverId做处理的代码

	    if(localIds.length > 0){

		syncUpload(localIds);

	    }

            if($('.imglist img').size() >= 9) {

                $("#upload_button").hide();

            }

	},

	fail: function (res) { alert(JSON.stringify(res)); }

    });

};

});

</script>

<script>

  $(".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();

      }

      $.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){

          window.location.href = "__URL__/test";

      });

  });

</script>

</body>

</html>

后台处理 testController.php

<span style="font-size: 14px;"> public function test() {
$signPackage = $this->getSignPackage();
$this->assign('signPackage', $signPackage);
$this->display('test');
}</span>

    public function test() {

	$signPackage = $this->getSignPackage();

	$this->assign('signPackage', $signPackage);

	$this->display('test');

    }

<span style="font-size: 14px;">public function wxupload() {
header('Content-type:application/json;chartset=utf-8');
$img_str = I('post.img_str', '', 'string');
$uploadROOT = realpath(THINK_PATH.'../Public/');//定义保存路径
$uploadPath = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片保存图片时已时间作一层目录作区分
if(!file_exists($uploadPath)) mkdir($uploadPath, 0775);
$savepath = '/Public/Upload/' . date('Y-m-d').'/';
$img_str = rtrim($img_str, ',');
$img_arr = explode(',', $img_str);
$str = ''; //sql语句字符串
$imgs = array();
foreach($img_arr as $v) {
$imgs[] = $this->doWechatPic($v);
}
$str = ''; //sql语句字符串
foreach($imgs as $v) {
$str .= "(NULL," . $this->_user_info_id . "," . $publish_id . ",'" . $v . "')" . ",";
}
$sql = "INSERT INTO img(`id`,`userid`,`publish_id`,`img_url`) values" . rtrim($str, ',');
$res = M()->query($sql);
if($res) {
$data = array('errcode' => 0, 'msg' => '成功！');
} else {
$data = array('errcode' => 1, 'msg' => '失败！');
}
exit( JSON($data));
}
/*
* 从微信服务器获取图片流
*/
public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn
$media_id = $serverId;//提交过来的serverId即$media_id
$access_token = $this->_get_wx_access_token_address( false );//获取access_token值
$pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";
$filebody = file_get_contents($pic_url);//通过接口获取图片流
$filename = uniqid().'.jpg'; //定义图片名字及格式
return $this->saveFile($filename, $filebody);
}
/*
* 定义文件路径，写入图片流
*/
public function saveFile($filename, $filecontent){
$uploadROOT = realpath(THINK_PATH.'../Public/');//定义保存路径
$uploadPath = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片保存图片时已时间作一层目录作区分
if(!file_exists($uploadPath)) mkdir($uploadPath, 0775);
$upload_dir = '/Public/Upload/' . date('Y-m-d'); //保存路径，以时间作目录分层
$savepath = '.'.$upload_dir.'/'.$filename;
if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片
return $upload_dir."/".$filename;//返回图片路径
}else{
exit(JSON('save failed'));
}
} </span>

    public function wxupload() {

	header('Content-type:application/json;chartset=utf-8');

	$img_str = I('post.img_str', '', 'string');

      	$uploadROOT 	= realpath(THINK_PATH.'../Public/');//定义保存路径

	$uploadPath 	= $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分

	if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);

	$savepath = '/Public/Upload/' . date('Y-m-d').'/';

	$img_str = rtrim($img_str, ',');

	$img_arr = explode(',', $img_str);

	$str = ''; //sql语句字符串

	$imgs = array();

	foreach($img_arr as $v) {

		$imgs[] = $this->doWechatPic($v);

	}

	$str = ''; //sql语句字符串

	foreach($imgs as $v) {

		$str .= "(NULL," . $this->_user_info_id . "," . $publish_id . ",'" . $v . "')" . ",";

	}

	$sql = "INSERT INTO img(`id`,`userid`,`publish_id`,`img_url`) values" . rtrim($str, ',');

	$res = M()->query($sql);			

	if($res) {

		 $data = array('errcode' => 0, 'msg' => '成功！');

	} else {

		 $data = array('errcode' => 1, 'msg' => '失败！');

	}

	exit( JSON($data));

    }

	/*

	 * 从微信服务器获取图片流

	 */

	public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn

	       $media_id = $serverId;//提交过来的serverId即$media_id

	       $access_token 	= $this->_get_wx_access_token_address( false );//获取access_token值

	        $pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";

	        $filebody = file_get_contents($pic_url);//通过接口获取图片流  

	        $filename = uniqid().'.jpg';            //定义图片名字及格式

	        return $this->saveFile($filename, $filebody);

	}  

	/*

	 * 定义文件路径，写入图片流

	 */

	public function saveFile($filename, $filecontent){  

	    $uploadROOT 	= realpath(THINK_PATH.'../Public/');//定义保存路径

		$uploadPath 	= $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分

		if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);

	    $upload_dir = '/Public/Upload/' . date('Y-m-d'); //保存路径，以时间作目录分层

	    $savepath = '.'.$upload_dir.'/'.$filename;       

	    if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片

	        return $upload_dir."/".$filename;//返回图片路径

	    }else{

	        exit(JSON('save failed'));

	    }  

	}

需要注意的是 access_token，signPackage参数不能错误

JSSDK图像接口多张图片上传下载并将图片流写入本地的更多相关文章

Python接口自动化——文件上传/下载接口
〇.前言文件上传/下载接口与普通接口类似,但是有细微的区别. 如果需要发送文件到服务器,例如:上传文档.图片.视频等,就需要发送二进制数据,上传文件一般使用的都是 Content-Type: mul ...
python2.7 操作ceph-cluster S3对象接口实现：上传下载查询删除顺便使用Docker装个owncloud 实现UI管理
python version: python2.7 需要安装得轮子: botofilechunkio command: yum install python-pip&& pip ...
执行asp.net上传下载Excel时出现“未在本地计算机上注册“Microsoft.ACE.Oledb.12.0”提供程序。(System.Data)”错误
服务器没有安装Office导致的错误,如何不想安装庞大的Office,可以下载安装: Microsoft Office Access Database Engine 2007 http://downl ...
文件上传下载（C#，web，asp.net）
目的:在浏览器页面启动上传下载CS软件,实现文件的批量下载与上传. 技术路线: 开发上传下载客户端CS程序与注册程序,压缩放到服务器端指定位置: 开发服务器端程序用以接收上传请求,压缩放到服务器端: ...
asp.net 模拟CURL调用微信公共平台API 上传下载多媒体文件接口
FormItem类 public class FormItem { public string Name { get; set; } public ParamType ParamType { get; ...
微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比
在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...
.Net Core 图片文件上传下载
当下.Net Core项目可是如雨后春笋一般发展起来,作为.Net大军中的一员,我热忱地拥抱了.Net Core并且积极使用其进行业务的开发,我们先介绍下.Net Core项目下实现文件上传下载接口. ...
js移动端/H5同时选择多张图片上传并使用canvas压缩图片
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
Jmeter 上传下载文件
最近很多同学都在问jmeter上传.下载文件的脚本怎么做,要压测上传.下载文件的功能,脚本怎么做,网上查了都说的很含糊,这次呢,咱们就好好的把jmeter的上传下载文件好好缕缕,都整明白了,怎么个过程 ...

随机推荐

c# XML 有多个重复子节点操作
1,继续添加ebm子节点 public static void CreateXml() { //创XML建对象 XmlDocument doc = new XmlDocument(); //声明根节点 ...
Weex 学习文档、跳转路径、控制台输出、we转js汇总
最近在学习阿里的weex框架,网上教程真是不少,但是有用的确实是少的很.其中大多数都是讲如何配置移动端的,很少有讲到weex语法的.要知道,如果真需要用weex编写js页面的话,很有可能是移动端开发者 ...
关于《阿里巴巴Java开发规约》插件的安装与使用
一.安装二.idea插件的安装与使用 https://github.com/alibaba/p3c/tree/master/idea-plugin#run-plugin Idea Plugin Pr ...
Hanoi问题算法
问题描述:假设有3个分别命名为A.B.C的塔座,在塔座A上插有n个直径大小各不同,一小到大标号为1,2,….,n的圆盘,要求将塔座A上的n个圆盘移动到C盘上,并且仍按原来的顺序叠排. 同时遵循下列规则 ...
华中农业大学第五届程序设计大赛网络同步赛-K
K．Deadline There are N bugs to be repaired and some engineers whose abilities are roughly equal. And ...
纯css3无缝滚动
纯css3无缝向左滚动: HTML: <div class="marqueCon"> <div class="marque"> < ...
JavaScrip 概述 -- 前端知识
JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...
【java】一些零碎的知识点
java注释文档一些常用的javadoc标签常用javadoc标签 @see: other-class 引用other-class 生成的html文档会有一个See Alse 作为超链接的只是条目 ...
MariaDB Centos7 下安装MariaDB
Centos7 下安装MariaDB by:授客 QQ:1033553122 1.下载安装文件 rpm包为例,对于标准服务器安装,至少需要下载client,shared,serve文件(安装时如果少了 ...
Expo大作战(三)--针对已经开发过react native项目开发人员有针对性的介绍了expo，expo的局限性，开发时项目选型注意点等
简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网我猜去全部机翻+个人 ...

JSSDK图像接口多张图片上传下载并将图片流写入本地

JSSDK图像接口多张图片上传下载并将图片流写入本地的更多相关文章

随机推荐

热门专题