php版微信JS-SDK圖片介面例子

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

微信JSSDK的圖片介面，能讓我們輕鬆實現上傳功能。繼續做例子，我們先更新下wx.config的jsApiList數組加入四個’chooseImage’, ‘uploadImage’, ‘downloadImage’, ‘previewImage’。
繼續用thinkphp做架構，首先們們建立Layout/image.phtml:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
{__CONTENT__}
</body>
<script type="text/javascript">
    window.jQuery || document.write("<script src='__PUBLIC__/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</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: [
            'checkJsApi',
            'chooseImage',
            'uploadImage',
            'downloadImage',
            'previewImage'
        ]
    });
    wx.ready(function () {
        var images = {
            localId: [],
            serverId: [],
            downloadId: []
        };
        document.querySelector('#selectImage').onclick = function () {
            wx.chooseImage({
                success: function (res) {
                    images.localId = res.localIds;
                    jQuery(function(){
                        $.each( res.localIds, function(i, n){
                            $("#img").append('<img src="'+n+'" /> <br />');
                        });
                    });
                }
            });
        };

        document.querySelector('#uploadImage').onclick = function () {
            if (images.localId.length == 0) {
                alert('請先使用選擇圖片按鈕');
                return;
            }
            images.serverId = [];
            jQuery(function(){
                $.each(images.localId, function(i,n) {
                    wx.uploadImage({
                        localId: n,
                        success: function (res) {
                            images.serverId.push(res.serverId);
                        },
                        fail: function (res) {
                            alert(JSON.stringify(res));
                        }
                    });
                });
            });
        };

        document.querySelector('#downloadImage').onclick = function () {
            if (images.serverId.length == 0) {
                alert('請先按上傳圖片按鈕');
                return;
            }
            jQuery(function() {
                $.each(images.serverId, function (i, n) {
                    wx.downloadImage({
                        serverId: n,
                        success: function (res) {
                            images.downloadId.push(res.localId);
                        }
                    });
                });
                $.each( images.downloadId, function(i, n){
                    $("#img2").append('<img src="'+n+'" /> <br />');
                });
            });
        };

        document.querySelector('#previewImage').onclick = function () {
            var imgList = [
                '__PUBLIC__/images/gallery/image-1.jpg',
                '__PUBLIC__/images/gallery/image-2.jpg'
            ];
            wx.previewImage({
                current: imgList[0],
                urls: imgList
            });
        };

    });

    wx.error(function(res){
        var str = res.errMsg;
        var reg = /invalid signature$/;
        var r = str.match(reg);
        if(r !== null) {
            jQuery(function(){
                $.getJSON('http://www.demo.com/tp/home/index/ticket', function(data) {
                    if(data) {
                        alert('ticket update');
                        location = location;
                        window.navigate(location);
                    }
                });
            });
        }
    });
</script>
</html>
建立視圖views/Index/image.phtml:
<style>
    .text-center {text-align: center;}
    .btn-hight {height:100px;width:230px;}
    #img img{width:200px;}
</style>
<div class="col-lg-12 col-sm-12" style="margin: 12px auto 10px;">
    <div class="form-group text-center">
        <button id="selectImage" type="button" class="btn btn-primary btn-hight"><h2>選擇圖片</h2></button>
    </div>
    <div class="form-group text-center">
        <div id="img"></div>
    </div>
    <div class="form-group text-center">
        <button id="uploadImage" type="button" class="btn btn-primary btn-hight"><h2>上傳圖片</h2></button>
    </div>
    <div class="form-group text-center">
        <button id="downloadImage" type="button" class="btn btn-primary btn-hight"><h2>下載圖片</h2></button>
    </div>
    <div class="form-group text-center">
        <div id="img2"></div>
    </div>
    <div class="form-group text-center">
        <button id="previewImage" type="button" class="btn btn-primary btn-hight"><h2>預覽圖片</h2></button>
    </div>
</div>
Controller就加入一個imageAction:
public function imageAction() {
        layout('Layout/image');
        $this->display();
    }
選擇圖片介面效果圖：

選擇圖片介面效果圖：

上傳和下載介面的效果圖：（注這裡是先上傳介面取到media_id再調下載圖片介面顯示出來，請看layout的js代碼）

預覽圖片介面效果圖：

其中上傳圖片介面返回的是media_id 就是以前上傳介面一樣的ID，我們可以用個非同步提交實現伺服器儲存！下載圖片介面把media_id轉化來本地localId，然後也是用JQ方法加入img元素顯示出來！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

php版微信JS-SDK圖片介面例子

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support