在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的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可能又会有问题,当然这只是极个别现象,用多了就会发现)。

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

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

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

    在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...

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

    当一个步骤后面有多个步骤时,可以设置为根据设置条件系统自动判断该流向哪些步骤,也叫路由. 工作流没有单独的路由步骤来设置条件,流程条件通过双击连线弹出条件设置框来设置. 1.sql条件 即通过sql条 ...

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

    策略设置包括当前步骤的流转方式,处理人员,退回策略等设置. 流转类型:当前步骤后面有多个步骤时,此类型选择可以决定后续步骤的发送方式. 1.系统控制:由系统根据您在线上设置的流转条件来判断该发送到哪一 ...

  4. asp.net 微信企业号办公系统-表单及流程设计配置实例

    在环境搭建好之后,我们就来学习一下怎样快速创建一个流程,并执行和流转该流程(我们这里讲的只是入门,不涉及到具体流程参数设置). 创建一个流程步骤为:在数据库在创建表-->设计表单-->设置 ...

  5. asp.net 微信企业号办公系统-流程设计--保存与发布

    如果流程未设计完时可以先保存,以后再打开接着设计.点击工具栏上的保存按钮即可保存当前流程设计: 如果下次要接着设计,则可以打开该流程继续设计: 如果流程设计完成,可以点击安装按钮来发布流程,流程安装成 ...

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

    事件设置是设置当前步骤在提交前后或退回前后要执行的一些操作(该事件为服务器事件). 事件格式为:dll名称.命名空间名称.类名.方法名,这里不需要写括号和参数,处理时会自动带上当前流程实例的相关参数. ...

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

    数据设置是控制在流程处理过程中,当前步骤的数据显示与编辑状态,控制当前步骤哪些字段为只读,隐藏或可编辑.需要配合表单设计器使用.

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

    按钮设置是配置当前步骤的处理者可以执行哪些操作,每个按钮都有对应的执行脚本(javascript脚本). 从左边的按钮列表中选择当前步骤需要的按钮. 注意:如果是流程最后一步则要配置完成按钮而不是发送 ...

  9. 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(一 、上传图片)

    前段时间在做一个微信的项目,遇到了一个上传图片的问题,花了一下午,解决了这个问题,然后把总结出来的代码,分享了出来. 最近又有一个图片+语音的功能, 更是蛋疼, 本次采用的不是File文件上传,然后转 ...

随机推荐

  1. vlan与交换机端口模式Access,Hybrid,Trunk

    以太网端口有三种链路类型:Access.Hybrid和Trunk.Access类型的端口只能属于1个VLAN,一般用于连接计算机的端口:Trunk类型的端口可以允许多个VLAN通过,可以接收和发送多个 ...

  2. Bitwise AND of Numbers Range

    Given a range [m, n] where 0 <= m <= n <= 2147483647, return the bitwise AND of all numbers ...

  3. 【leetcode】Best Time to Buy and Sell Stock II

    Best Time to Buy and Sell Stock II Say you have an array for which the ith element is the price of a ...

  4. iOS 如何使用自定义字体

    首先,你需要有字体文件,比如 xxx.otf,之后你需要到工程的info配置文件中加入Fonts provided by application的值,如下图 之后,就可以使用字体名和UIFont的方法 ...

  5. 转关于垂直切分Vertical Sharding的粒度

    垂直切分的粒度指的是在做垂直切分时允许几级的关联表放在一个shard里.这个问题对应用程序和sharding实现有着很大的影响. 关联打断地越多,则受影响的join操作越多,应用程序为此做出的妥协就越 ...

  6. MFC 文件按行读写 CStdioFile

    //写文件 CStdioFile file; file.Open("test.txt",CFile::modeCreate|CFile::modeReadWrite); file. ...

  7. 解决 jersey javax.ws.rs.core.UriBuilder.fromUri(UriBuilder.java:119)

    检查是否Jar冲突 保留一个jersey-server-*.jar

  8. java单例,懒汉&饿汉

     * 单例模式Singleton  * 应用场合:有些对象只需要一个就足够了,如皇帝  * 作用: 保证整个应用程序中某个实例有且只有一个  * 区别: 饿汉模式的特点是加载类时比较慢,但运行是比较快 ...

  9. 针对不同包之间的action跳转,怎么配置?

    例如一下的例子:两个包,如何跳转 <struts>           <constant name="struts.enable.DynamicMethodInvocat ...

  10. iptables 开启3306端口

    [root@mysqld ~]# mysql -uroot -h 192.168.1.35 -p Enter password: ERROR 1130 (HY000): Host '192.168.1 ...