zoukankan      html  css  js  c++  java
  • 微信js-sdk,选择图片,上传,下载到本地,php服务端

    //前端js代码
    <script> //客户端6.0.2 wx.config({ //debug:true, appId: "{pigcms:$signPackage.appId}", timestamp: {pigcms:$signPackage.timestamp}, nonceStr: '{pigcms:$signPackage.nonceStr}', signature: '{pigcms:$signPackage.signature}', url : '{pigcms:$signPackage.url}', jsApiList: [ 'checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage' ] }); wx.ready(function() { // 1 判断当前版本是否支持指定 JS 接口,支持批量判断 wx.checkJsApi({ jsApiList: [ 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'downloadVoice' ], success: function(res) { //alert(JSON.stringify(res)); } }); var images = { localId: [], serverId: [], downloadId: []//可以无视 }; var xmlHttpRequest; var accessToken=getCookie("accessToken"); //选择图片 document.getElementById("selpic").onclick = function() { $("#errormsg").append("开始选择图片<br />"); wx.chooseImage({ count: 9, // 默认9 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有'original', success: function(res) { images.localId = res.localIds;// 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 jQuery(function(){ var imglist=""; $.each( res.localIds, function(i, n){//这里是显示已选择的图片 imglist+='<li ><img src="'+n+'" style="95%;height:150px;" /></li>'; //$("#errormsg").append("res.localIds:"+n+"<br />"); }); $("#imageContainer > ul").html(imglist); }); } }); } document.querySelector("#uploadImage").onclick = function () {//绑定onclick事件,如果没有这个按钮,要注释掉代码,不然点击无效 $("#errormsg").show(); $("#errormsg").append("<br />开始上传图片");//下文对此div赋值,只为了直观的看到动态效果 if (images.localId.length == 0) { alert('请先选择图片'); return; } images.serverId = []; var localIds = images.localId; uploadimg(localIds); } var currentproindex=0; function getimgtoserver(serverIds){ //$("#errormsg").append("<br />serverIds length:"+serverIds.length+","); var classid=$("#seltype").val(); var classname=encodeURI($("#seltype option:selected").text());//传汉字需要转一下,php那边再翻转一下就好了 var serverId=serverIds.pop();//很微妙的方法,每次从数组取一个 var proname=encodeURI($("#txtname").val()); var newurl="http://ab.com/i_product.php?action=getwximg&proname="+proname+"&classid="+classid+"&classname="+classname+"&proindex="+currentproindex+"&uname={pigcms:$_SESSION['uname']}&uid={pigcms:$_SESSION['uid']}&token={pigcms:$_SESSION['token']}&wxurl=http://file.api.weixin.qq.com/cgi-bin/media/get&random="+Math.random()+"&accesstoken="+accessToken+"&mediaid="+serverId;//这里拼接地址,给服务器传参,下载图片需要在服务端处理,js请求存在跨域问题,并且,微信里,jq的初始xmlHttpRequest不能用,只能手写了,难道是我不会用jq? //$("#errormsg").append("<br />"+newurl); //$("#errormsg").append("<br />serverId:"+serverId) xmlHttpRequest.open("POST",newurl,true);//防止参数过长,还是用post方法吧 xmlHttpRequest.onreadystatechange=function(){ if (xmlHttpRequest.readyState==4){ if(xmlHttpRequest.status==200){ if(serverIds.length>0){ currentproindex+=1; getimgtoserver(serverIds);//递归调用,等本次成功,再开始第二个图片的上传操作 } else{ $("#errormsg").append("<br />上传成功"); } //$("#errormsg").append("<br />"+xmlHttpRequest.responseText); } else{ $("#errormsg").append(xmlHttpRequest.status); } } else if(xmlHttpRequest.readyState==1){ //$("#errormsg").append("<br />初始化成功"); } else if(xmlHttpRequest.readyState==2){ $("#errormsg").append("<br />正在发送数据"); } else if(xmlHttpRequest.readyState==3){ $("#errormsg").append("<br />正在等待服务器反馈"); } else{ $("#errormsg").append("发生错误了。");//+xmlHttpRequest.responseText); } } xmlHttpRequest.send(); } function uploadimg(localIds){ //$("#errormsg").append("<br />localIds length:"+localIds.length); var localId = localIds.pop(); wx.uploadImage({ localId: localId, // isShowProgressTips: 1, success: function (res) { images.serverId.push(res.serverId); //$("#errormsg").append("<br />"+res.serverId+","); if(localIds.length > 0){ uploadimg(localIds); } else{ if(window.XMLHttpRequest){ xmlHttpRequest=new XMLHttpRequest(); }else{ xmlHttpRequest=new ActiveXObject("MSXML2.XMLHTTP.3.0");//("Microsoft.XMLHTTP"); } $("#errormsg").append("<br />准备处理,请等待..."); var serverIds=images.serverId; getimgtoserver(serverIds); } }, fail: function (res) { alert("上传失败,请稍候重试"); } }); } }); wx.error(function(res) { alert(res.errMsg); }); //读取cookies function getCookie(name) { var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); if(arr=document.cookie.match(reg)) return (arr[2]); else return null; } function initsel(){ var url="http://abc.com/chat/i_product.php?action=getclothestype&token={pigcms:$_SESSION['token']}"; //alert(url); $.getJSON(url,function(data){ var str="<option value=''>-请选择-</option>"; if(data.length>0){ for(i=0;i<data.length;i++){ str+="<option value='"+data[i].id+"'>"+data[i].name+"</option>" } } $("#seltype").html(str); }); } $(function(){ initsel();//初始化下拉菜单 }); </script>
    //php服务端代码
    $act
    = $_GET['action']; if ($act == 'getwximg') { $wxurl=$_GET['wxurl']; $access_token=$_GET['accesstoken']; $media_id=$_GET['mediaid']; $newurl=$wxurl."?access_token=".$access_token."&media_id=".$media_id;//用php去请求获取图片的接口,js直接调用存在跨域问题 $token=$_GET['token']; $uid=$_GET['uid']; $uname=$_GET['uname']; $proindex=$_GET['proindex']; $classid=$_GET['classid']; $classname=urldecode($_GET['classname']);//取到的汉字,翻转一下 $proname=urldecode($_GET['proname']); $fileInfo = downloadWeixinFile($newurl);//通过接口,取结果 $filename = date("ymdhis",time()).".jpg";//图片名称 $time = time(); $newfolder="uploads/".date("y-m-d",$time)."/";//文件夹名称 saveWeixinFile($newfolder,$filename, $fileInfo["body"]);//把取到的base64代码,保存成图片 //echo $newurl; if($proindex==0){//因为图片是一次性上传的,这里判断一下,第一张作为产品的封面,剩下的作为产品的描述 $query = "INSERT INTO tp_img(uid,uname,token,createtime,uptatetime,classid,classname,title,pic) VALUE('".$uid."','".$uname."','".$token."','".$time."','".$time."',".$classid.",'".$classname."','".$proname."','http://abc.com/chat/".$newfolder.$filename."')"; //$query = "INSERT INTO t_ChatMessage(UserCode,Contents,ToUser,IsRead) VALUE('$sendid', '$msg','$toid','0')"; $result = mysql_query($query) or die("{"error":true,"errorMsg":"Error in query: $query. " . mysql_error().""}"); } else{ $query ="select * from tp_img where token='".$token."' order by uptatetime desc limit 1"; $result = mysql_query($query) or die("{"error":true,"errorMsg":"Error in query: $query. " . mysql_error().""}"); $items = array(); while($row = mysql_fetch_array($result)){ array_push($items, ($row)); $query_update="update tp_img set info=CONCAT(info,'','<div style="margin-top:3px;"><img src="http://abc.com/chat/".$newfolder.$filename."" /></div>') where id=$row[id]";//在产品描述的字段上追加内容 mysql_query($query_update); } } //echo "{"error":""+$rtmsg+""}"; }
    function downloadWeixinFile($url)  
    {  
        $ch = curl_init($url);  
        curl_setopt($ch, CURLOPT_HEADER, 0);      
        curl_setopt($ch, CURLOPT_NOBODY, 0);    //只取body头  
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);  
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);  
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);  
        $package = curl_exec($ch);  
        $httpinfo = curl_getinfo($ch);  
        curl_close($ch);  
        $imageAll = array_merge(array('header' => $httpinfo), array('body' => $package));   
        return $imageAll;  
    }  
       
    function saveWeixinFile($newfolder,$filename, $filecontent)  
    {     
        createFolder($newfolder);  
        $local_file = fopen($newfolder."/".$filename, 'w');  
        if (false !== $local_file){  
              
            if (false !== fwrite($local_file, $filecontent)) {  
              
                fclose($local_file);  
             
            }  
        }  
    }  
     function createFolder($path)  
     {  
      if (!file_exists($path))  
      {  
       createFolder(dirname($path));  
       mkdir($path, 0777);  
      }  
     }  
    //第二种方法
    
    $accessToken = '公众号 AccessToken';
    $media_id = 'wx.uploadImage 返回的 serverId';
    
    // 要存在你服务器哪个位置?
    $targetName = './tmp/'.date('YmdHis).'.jpg';
    
    $ch = curl_init("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$accessToken}&media_id={$serverId}");
    $fp = fopen(FCPATH.$targetName, 'wb');
    curl_setopt($ch, CURLOPT_FILE, $fp);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_exec($ch);
    curl_close($ch);
    fclose($fp);
    //第三种方法
    public function doMobileUpload(){
            global $_W,$_GPC;
            load()->classs('weixin.account');
            $accObj= new WeixinAccount();
            $access_token = $accObj->fetch_available_token();
    
            $media_id = $_GET['media_id'];
    
            $url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$access_token."&media_id=".$media_id;
    
            $newfolder= ATTACHMENT_ROOT . 'images' . '/hao_time_photos'."/";//文件夹名称
            if (!is_dir($newfolder)) {
                 mkdir($newfolder, 0777);
            } 
            $picurl = 'images'.'/hao_time_photos'."/".date('YmdHis').rand(1000,9999).'.jpg';
            $targetName = ATTACHMENT_ROOT.$picurl;
            $ch = curl_init($url); // 初始化
            $fp = fopen($targetName, 'wb'); // 打开写入
            curl_setopt($ch, CURLOPT_FILE, $fp); // 设置输出文件的位置,值是一个资源类型
            curl_setopt($ch, CURLOPT_HEADER, 0);
            curl_exec($ch);
            curl_close($ch);
            fclose($fp);
            echo $picurl;
        }
  • 相关阅读:
    java 在线网络考试系统源码 springboot mybaits vue.js 前后分离跨域
    springboot 整合flowable 项目源码 mybiats vue.js 前后分离 跨域
    flowable Springboot vue.js 前后分离 跨域 有代码生成器 工作流
    Flowable 工作流 Springboot vue.js 前后分离 跨域 有代码生成器
    java 企业 网站源码 后台 springmvc SSM 前台 静态化 代码生成器
    java 进销存 商户管理 系统 管理 库存管理 销售报表springmvc SSM项目
    基于FPGA的电子计算器设计(中)
    基于FPGA的电子计算器设计(上)
    FPGA零基础学习:SPI 协议驱动设计
    Signal tap 逻辑分析仪使用教程
  • 原文地址:https://www.cnblogs.com/zhoumeng780/p/5346762.html
Copyright © 2011-2022 走看看