JSSDK圖像接口多張圖片上傳下載並將圖片流寫入本地

時間  2019-11-30
標籤 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.phpjavascript

 

[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參數不能錯誤php

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程