zoukankan      html  css  js  c++  java
  • 微信选择图片做上传存储

    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>
  • 相关阅读:
    C#读取资源文件的两种方法及保存资源文件到本地
    T4模板编辑器
    VS (Visual Studio) 快捷键
    以太网帧类型速查
    线程间操作无效: 从不是创建控件“XXX”的线程访问它
    C# 集合
    C#控件之ListView
    C# Color颜色对照表
    Java的内存需要划分成为5个部分:
    Java学习:数组的使用和注意事项
  • 原文地址:https://www.cnblogs.com/examine/p/4655211.html
Copyright © 2011-2022 走看看