微信選擇圖片做上傳存儲


html代碼

  坑爹的安卓微信開發 啊

 //必須做一下mediaId的設定,否則將會無法在安卓端得到微信上傳功能的觸發
 localId = localIds.toString();

 

<div class="wxapi_container">
    <form action="<?=url('User.addUserInfo')?>" method="post" enctype="multipart/form-data">
        <input type="text" name="name">
        <input type="text"  name="personId"  value="<?php echo $personId ?>">
        <button>提交</button>
    </form>
 <img id="img" src="" alt="" />
    <div class="lbox_close wxapi_form">
      <h3 id="menu-basic">基礎接口</h3>
      <span class="desc">判斷當前客戶端是否支持指定JS接口</span>
      <button class="btn btn_primary" id="checkJsApi">checkJsApi</button>

      <h3 id="menu-image">圖像接口</h3>
      <span class="desc">拍照或從手機相冊中選圖接口</span>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button>
      <span class="desc">預覽圖片接口</span>
      <button class="btn btn_primary" id="previewImage">previewImage</button>
      <span class="desc">上傳圖片接口</span>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button>
    <button>提交</button>
  </form>
    </div>

  <div id="error">
    
  </div>
</div>
<script language="javascript">

 function weixinApiConfig(apiList, debug)
 {
     <?php if ($this->get('debug')): ?>
     debug = true;
     <?php endif; ?>
     wx.config({
         debug: debug ? true : false,
         appId: 'APPID',
         timestamp: <?=$timestamp?>,
         nonceStr: '<?=$noncestr?>',
         signature: '<?=$signature?>',
         jsApiList: apiList
     });
 }

</script>
<script>

 weixinApiConfig([
     'hideOptionMenu',
     'checkJsApi',
     'chooseImage',
     'previewImage',
     'getNetworkType',
     'previewImage',
     'uploadImage'
 ], false);

wx.ready(function(){
 
  //  判斷當前版本是否支持指定 JS 接口,支持批量判斷
  document.getElementById('checkJsApi').onclick = function () {
    wx.checkJsApi({
      jsApiList: [
        'getNetworkType',
        'previewImage'
      ],
      success: function (res) {
        alert(JSON.stringify(res));
      }
    });
  };

   // 設備信息接口
  //  獲取當前網絡狀態
  // document.getElementById('getNetworkType').onclick = function () {
  //   wx.getNetworkType({
  //     success: function (res) {
  //       alert(res.networkType);
  //     },
  //     fail: function (res) {
  //       alert(JSON.stringify(res));
  //     }
  //   });
  // };

  // 2 圖片預覽
  document.getElementById('previewImage').onclick = function () {
    wx.previewImage({
      current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
      urls: [
        'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
        'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
        'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
      ]
    });
  };

  //  圖片接口
  // 1 拍照、本地選圖
  // var images = {
  //   localId: [],
  //   serverId: []
  // };

  //'album', 'camera'  默認為 'album'
  var sourceType = 'album'+','+'camera'; 
  alert(sourceType);
  var localIds = '';
  document.getElementById('chooseImage').onclick = function () {
    wx.chooseImage({
      count: 9, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
      sourceType: [sourceType], // 可以指定來源是相冊還是相機,默認二者都有
      success: function (res) {
        //images.localId = res.localIds;
        localIds = res.localIds;  // 返回選定照片的本地ID列表,localId可以作為img標簽的src屬性顯示圖片
        document.getElementById('img').src = localIds;   //圖片顯示
        //必須做一下mediaId的設定,否則將會無法在安卓端得到微信上傳功能的觸發
        localId = localIds.toString();
        alert('已選擇 ' + res.localIds.length + ' 張圖片');
      }
    });
  };

  
  // 2 上傳圖片
  document.getElementById('uploadImage').onclick = function () {
    // if (images.localId.length == 0) {
    //   alert('請先使用 chooseImage 接口選擇圖片');
    //   return;
    // }
    if(localIds.length == 0)
    {
      alert('請先使用 chooseImage 接口選擇圖片圖片');
      return;
    }
    // var i = 0, length = images.localId.length;
    // images.serverId = [];
    // function upload() {
    //   wx.uploadImage({
    //     localId: images.localId[i],
    //     success: function (res) {
    //       i++;
    //       alert('已上傳:' + i + '/' + length);
    //       images.serverId.push(res.serverId);
    //       if (i < length) {
    //         upload();
    //       }
    //     },
    //     fail: function (res) {
    //       alert(JSON.stringify(res));
    //     }
    //   });
    // }
    function upload(){
       
        wx.uploadImage({
          localId: localId, // 需要上傳的圖片的本地ID,由chooseImage接口獲得
          isShowProgressTips: 1, // 默認為1,顯示進度提示
          success: function (res) {
            var serverId = res.serverId; // 返回圖片的服務器端ID
            alert(serverId)
          },
          fail:function(res){
            alert('aaa');alert(res.errMsg);
            // alert(JSON.stringify(res))
          }
        });
    }
    upload();
    alert('yyy');
  };





 });


wx.error(function (res) {
  document.getElementById('error').innerHTML = res.errMsg;
});
</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM