zoukankan      html  css  js  c++  java

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

    [html] view plain copy print?
    1. <span style="font-size: 14px;"><!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4. <meta charset="UTF-8">  
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
    6. <title>发布图片</title>  
    7. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
    8. <meta name="apple-mobile-web-app-capable" content="yes">  
    9. <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    10. <meta name="format-detection" content="telephone=no">  
    11. <link rel="stylesheet" type="text/css" href="/Public/Weixin/css/common.css">  
    12. </head>  
    13. <body>  
    14. <p>最多可添加9张作品</p>  
    15. <input type="file" id="uploadphoto" name="uploadfile" value="请点击上传图片"   style="display:none;" />    
    16. <div class="imglist"></div>  
    17. <input type="hidden" id="img_str" name="img_str">   
    18. <a id="upload_button" href="javascript:void(0);" class="uploadImage uploadbtn"><img src="/Public/Weixin/images/upload-add.png" alt=""></a>   
    19. <div class="sb">发布</div>  
    20. <script type="text/javascript" src="/Public/Weixin/js/jquery.min.js"></script>  
    21. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
    22. <script>    
    23. wx.config({  
    24. debug: false,  
    25. appId: '{$signPackage["appid"]}',  
    26. timestamp: {$signPackage["timestamp"]},  
    27. nonceStr: '{$signPackage["noncestr"]}',  
    28. signature: '{$signPackage["signature"]}',  
    29. jsApiList: [  
    30. // 所有要调用的 API 都要加到这个列表中  
    31. 'chooseImage','previewImage','uploadImage','downloadImage'  
    32. ]  
    33. });  
    34. wx.ready(function () {  
    35. // 5.3 上传图片  
    36. $('.uploadImage').on('click', function () {  
    37.     wx.chooseImage({  
    38.         success: function (res) {  
    39.             var localIds = res.localIds;  
    40.             syncUpload(localIds);  
    41.         }  
    42.     });  
    43. });  
    44. var syncUpload = function(localIds){  
    45.     var localId = localIds.pop();  
    46.     wx.uploadImage({  
    47.     localId: localId,  
    48.     isShowProgressTips: 1,  
    49.     success: function (res) {  
    50.         var serverId = res.serverId; // 返回图片的服务器端ID  
    51.             var str = $('#img_str').val()+serverId+',';  
    52.             $('.imglist').append("<img src='"+localId+"' />");  
    53.             $('#img_str').val(str);  
    54.         //其他对serverId做处理的代码  
    55.         if(localIds.length > 0){  
    56.         syncUpload(localIds);  
    57.         }  
    58.             if($('.imglist img').size() >= 9) {  
    59.                 $("#upload_button").hide();  
    60.             }  
    61.     },  
    62.     fail: function (res) { alert(JSON.stringify(res)); }  
    63.     });  
    64. };  
    65. });  
    66. </script>  
    67.   
    68. <script>  
    69.   
    70.   $(".sb").click(function(){  
    71.       var imglist = $(".imglist").html();  
    72.        
    73.       if(imglist == "" || imglist == null) {  
    74.          alert("请添加图片");  
    75.            return false;  
    76.       } else {  
    77.           if($(".imglist").find('img').size() >9) {  
    78.               alert("图片只允许上传9张！");  
    79.               return false;  
    80.           }  
    81.       var img_str = $('#img_str').val();  
    82.       }  
    83.   
    84.       $.post("{:U('Test/wxupload')}", {img_str:img_str},function(data){  
    85.           window.location.href = "__URL__/test";  
    86.       });  
    87.   });  
    88.   
    89. </script>  
    90. </body>  
    91. </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

    [php] view plain copy print?
    1. <span style="font-size: 14px;">    public function test() {  
    2.     $signPackage = $this->getSignPackage();  
    3.     $this->assign('signPackage', $signPackage);  
    4.     $this->display('test');  
    5.     }</span>  
        public function test() {
	$signPackage = $this->getSignPackage();
	$this->assign('signPackage', $signPackage);
	$this->display('test');
    }
    [php] view plain copy print?
    1.    <span style="font-size: 14px;">public function wxupload() {  
    2. header('Content-type:application/json;chartset=utf-8');  
    3. $img_str = I('post.img_str', '', 'string');  
    4.         $uploadROOT     = realpath(THINK_PATH.'../Public/');//定义保存路径       
    5. $uploadPath     = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分  
    6. if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);  
    7.               
    8. $savepath = '/Public/Upload/' . date('Y-m-d').'/';   
    9. $img_str = rtrim($img_str, ',');  
    10.   
    11. $img_arr = explode(',', $img_str);  
    12. $str = ''; //sql语句字符串  
    13. $imgs = array();  
    14.   
    15. foreach($img_arr as $v) {  
    16.     $imgs[] = $this->doWechatPic($v);  
    17. }  
    18.       
    19. $str = ''; //sql语句字符串  
    20. foreach($imgs as $v) {  
    21.     $str .= "(NULL," . $this->_user_info_id . "," . $publish_id . ",'" . $v . "')" . ",";  
    22. }  
    23. $sql = "INSERT INTO img(`id`,`userid`,`publish_id`,`img_url`) values" . rtrim($str, ',');  
    24. $res = M()->query($sql);           
    25.   
    26. if($res) {  
    27.      $data = array('errcode' => 0, 'msg' => '成功！');  
    28. } else {  
    29.      $data = array('errcode' => 1, 'msg' => '失败！');  
    30. }  
    31. exit( JSON($data));  
    32.    }  
    33.   
    34. /*  
    35.  * 从微信服务器获取图片流  
    36.  */    
    37. public function doWechatPic($serverId){//media_id=jlJs_iQIOA-TKLuhk4nCdPEdXnJ6paIeToO8vr-WUGvz05-6i5n498EzI232xSxn     
    38.        $media_id = $serverId;//提交过来的serverId即$media_id       
    39.        $access_token    = $this->_get_wx_access_token_address( false );//获取access_token值  
    40.         
    41.         $pic_url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$access_token}&media_id={$media_id}";    
    42.         $filebody = file_get_contents($pic_url);//通过接口获取图片流    
    43.           
    44.         $filename = uniqid().'.jpg';            //定义图片名字及格式    
    45.         return $this->saveFile($filename, $filebody);    
    46. }    
    47.     
    48. /*  
    49.  * 定义文件路径，写入图片流  
    50.  */    
    51. public function saveFile($filename, $filecontent){    
    52.   
    53.     $uploadROOT     = realpath(THINK_PATH.'../Public/');//定义保存路径       
    54.     $uploadPath     = $uploadROOT."/Upload/".date('Y-m-d')."/";//为方便管理图片 保存图片时 已时间作一层目录作区分  
    55.     if(!file_exists($uploadPath)) mkdir($uploadPath,  0775);  
    56.     $upload_dir = '/Public/Upload/' . date('Y-m-d'); //保存路径，以时间作目录分层    
    57.     $savepath = '.'.$upload_dir.'/'.$filename;         
    58.       
    59.     if(file_put_contents($savepath, $filecontent)){//写入图片流生成图片    
    60.         return $upload_dir."/".$filename;//返回图片路径    
    61.     }else{    
    62.         exit(JSON('save failed'));    
    63.     }    
    64.         
    65. } </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参数不能错误
  • 相关阅读:
    H265播放器EasyPlayer-RTSP WIN版播放器D3D和GDI两种渲染模式效果比较
    笛卡尔树复习笔记
    康托の复习笔记
    django rest unique 和UniqueTogether 检验
    代码扫描tool sonar
    await async axios
    httprunner 实现文件上传
    vue 实现xmind 脑图 web 创建脑图何修改删除
    jsmind
    【CF1548E】Gregor and the Two Painters
  • 原文地址：https://www.cnblogs.com/yelanggu/p/8625045.html
Copyright © 2011-2022 走看看