微信选择图片做上传存储

<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>