微信企业号办公系统-JSSDK上传图片(多图上传)

在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片。

微信jssdk-api带有一套完整的调用选择本地图片上传的功能,很多朋友在问到多图上传的问题。在这里分享一下自己的做法,其实并不是自己的做法,就是完全按照微信开发文档的做法,很多朋友可能没有仔细看文档,或者文档内容太多所以不想看,然后就不知道做法了,我这里挂出来,是这样做的

var images = {
    localId: [],
    serverId: []
  };

  

 document.querySelector(‘#chooseImage‘).onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert(‘已选择 ‘ + res.localIds.length + ‘ 张图片‘);
      }
    });
  };

  // 5.2 图片预览
  document.querySelector(‘#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‘
      ]
    });
  };

  // 5.3 上传图片
  document.querySelector(‘#uploadImage‘).onclick = function () {
    if (images.localId.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));
        }
      });
    }
    upload();    /*********************多张图片,这里上传使用的是递归******************************/
  };

  // 5.4 下载图片
  document.querySelector(‘#downloadImage‘).onclick = function () {
    if (images.serverId.length === 0) {
      alert(‘请先使用 uploadImage 上传图片‘);
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert(‘已下载:‘ + i + ‘/‘ + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();      /*********************多张图片,这里下载使用的是递归******************************/

  };

  多图上传或者下载都是使用的递归方法,在android或者IOS中都是行得通的(在这里多说一句,有些接口,Android行得通,IOS却不行;IOS可以的,Android可能又会有问题,当然这只是极个别现象,用多了就会发现)。

这些接口都是需要配合着图片选择来用的哦

时间: 2024-11-05 14:50:31

微信企业号办公系统-JSSDK上传图片(多图上传)的相关文章

微信企业号办公系统-平台添加账号及微信关注-在线体验地址

在线体验 登录成功后,先到系统管理-组织机构管理功能中添加人员账号信息. 点击部门信息出现添加人员按钮 点击添加人员按钮出现添加人员界面,填写必要的信息提示添加成功 添加成功后,手机打开微信二维码,扫描下方二维码关注 关注成功后,会有验证消息提示,输入前面在系统中输入的手机号码,进行验证,验证通过就可以看到平台中的应用.

微信企业号办公系统-图片预览放大功能-previewImage

在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调用. previewImage是微信客户端给内置浏览器增加的一个Javascript Interface,通过调用这个API,可以调起微信客户端提供的大图片查看组件. 官方说明和例子: wx.previewImage({ current: '', // 当前显示图片的http链接 urls: []

asp.net 微信企业号办公系统-流程设计--流转条件设置(路由)

当一个步骤后面有多个步骤时,可以设置为根据设置条件系统自动判断该流向哪些步骤,也叫路由. 工作流没有单独的路由步骤来设置条件,流程条件通过双击连线弹出条件设置框来设置. 1.sql条件 即通过sql条件来判断条件是否满足,条件对应的表为流程对应的表. 2.组织机构 通过当前人员在组织机构中的关系来判断条件是否满足. 3.自定义方法 该方法的使用和参数与步骤中的事件相同. 注意:如果要使设置的条件生效需要在步骤设置中将流转类型设置为:系统控制 系统会根据您设置的条件自动判断该发送到哪些步骤.

asp.net 微信企业号办公系统-流程设计--流程步骤设置-策略设置

策略设置包括当前步骤的流转方式,处理人员,退回策略等设置. 流转类型:当前步骤后面有多个步骤时,此类型选择可以决定后续步骤的发送方式. 1.系统控制:由系统根据您在线上设置的流转条件来判断该发送到哪一步(线上的条件设置将在后面说明). 2.单选一个分支流转:后面有多个步骤时当前处理人员只能选择发送到后面的某一个步骤. 3.多选几个分支流转:后面有多个步骤时当前处理人员可以多选发送到后面的某几个或全部步骤. 运行时选择:是否允许该步骤处理人员在发送到下一步的时候选择接收人员,如果设置为不允许则只能

asp.net 微信企业号办公系统-流程设计--流程步骤设置-基本设置

流程属性设置完成后点击确定之后,即可进行流程步骤设置了. 点击工具栏上的步骤按钮,即可添加一个新步骤. 在新步骤图形上双击即可弹出该步骤相应属性设置框. 步骤ID:系统自动为该步骤生成的唯一ID. 步骤名称:该步骤的名称. 意见显示:是否在审批表单的底部显示历史步骤的审批意见,如果选择了显示则会如下图显示历史意见: 审签类型:无签批意见栏:在表单底部没有签批意见栏,该步骤不需要签批意见即可发送,有签批意见栏(无须签章):在表单底部有签批意见栏,但没有签章按钮,此步骤需要签意见,但不须要签章,有签

asp.net 微信企业号办公系统-表单设计-HTML编辑器

本系统目前采用的html编辑器为ueditor编辑器(和表单设计器的编辑器相同). 绑定字段:与数据表的某个字段对应. 宽度:编辑器的宽度. 高度:编辑器的高度. 运行效果如下:

asp.net 微信企业号办公系统-流程设计-流程属性设置

打开流程设计器点击新建流程后会弹出新流程属性设置框,属性设置包括基本信息,数据连接和标识字段三项设置. 1.基本信息 流程ID:系统自动给每个流程分配的一个唯一ID. 流程名称:给您的新流程取一个名称. 流程分类:流程的分类管理,此分类在数据字典中维护. 管理者:指定该流程的管理者,管理者可以修改和删除该流程. 实例管理者:该流程的实例管理者,管理者可以查看该流程的处理过程和人工干预该流程的流转,如中途指派,强制退回等. 删除已完成:当流程实例完成后是否从任务表中删除该流程实例的审批过程. 设计

asp.net 微信企业号办公系统-表单设计-子表

子表即明细表 从表:与主表对应在子表. 从表主键:从表的主键. 主表字段:主表中与从来关联的字段,一般为主表的主键. 与主表关联字段:从表中与主表关联的字段. 选择之后即可在下面从表字段列表中设置每个字段是否显示,即编辑模式.

asp.net 微信企业号办公系统-表单设计-新建表单(属性设置)

点击表单设计工具栏上的 新建表单 按钮会弹出新表单属性设置框: 表单名称:新表单表名称. 数据连接:表单对应的数据库连接(此连接在 系统管理-->数据库连接 中维护). 数据表:表单对应的数据库表. 主键:数据库表的主键(主键只能是自增的int型,或uniqueidentifier(guid)类型). 标题字段:业务表中的哪个字段数据来作为待办任务的标题. 程序库分类:表单的分类,此分类在 数据字典 中维护. 任务标题:是否自动生成标题,如果是自动生成则会以 流程名称(发起者姓名) 的形式自动生