微信js-sdk，選擇圖片，上傳，下載到本地，php服務端

時間  2019-12-01
標籤 微信 sdk 選擇 圖片 上傳 下載 本地 php 服務 欄目 JavaScript 简体版
原文   原文鏈接 
//前端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="width: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;
    }
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程