微信企业号办公系统-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可能又会有问题,当然这只是极个别现象,用多了就会发现)。
这些接口都是需要配合着图片选择来用的哦
微信企业号办公系统-JSSDK上传图片(多图上传)的更多相关文章
- 微信企业号办公系统-图片预览放大功能-previewImage
在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...
- asp.net 微信企业号办公系统-流程设计--流转条件设置(路由)
当一个步骤后面有多个步骤时,可以设置为根据设置条件系统自动判断该流向哪些步骤,也叫路由. 工作流没有单独的路由步骤来设置条件,流程条件通过双击连线弹出条件设置框来设置. 1.sql条件 即通过sql条 ...
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-策略设置
策略设置包括当前步骤的流转方式,处理人员,退回策略等设置. 流转类型:当前步骤后面有多个步骤时,此类型选择可以决定后续步骤的发送方式. 1.系统控制:由系统根据您在线上设置的流转条件来判断该发送到哪一 ...
- asp.net 微信企业号办公系统-表单及流程设计配置实例
在环境搭建好之后,我们就来学习一下怎样快速创建一个流程,并执行和流转该流程(我们这里讲的只是入门,不涉及到具体流程参数设置). 创建一个流程步骤为:在数据库在创建表-->设计表单-->设置 ...
- asp.net 微信企业号办公系统-流程设计--保存与发布
如果流程未设计完时可以先保存,以后再打开接着设计.点击工具栏上的保存按钮即可保存当前流程设计: 如果下次要接着设计,则可以打开该流程继续设计: 如果流程设计完成,可以点击安装按钮来发布流程,流程安装成 ...
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-事件设置
事件设置是设置当前步骤在提交前后或退回前后要执行的一些操作(该事件为服务器事件). 事件格式为:dll名称.命名空间名称.类名.方法名,这里不需要写括号和参数,处理时会自动带上当前流程实例的相关参数. ...
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-数据设置
数据设置是控制在流程处理过程中,当前步骤的数据显示与编辑状态,控制当前步骤哪些字段为只读,隐藏或可编辑.需要配合表单设计器使用.
- asp.net 微信企业号办公系统-流程设计--流程步骤设置-按钮设置
按钮设置是配置当前步骤的处理者可以执行哪些操作,每个按钮都有对应的执行脚本(javascript脚本). 从左边的按钮列表中选择当前步骤需要的按钮. 注意:如果是流程最后一步则要配置完成按钮而不是发送 ...
- 【原创】.Net 微信 JS-SDK图片、语音上传接口的实现(MVC)-(一 、上传图片)
前段时间在做一个微信的项目,遇到了一个上传图片的问题,花了一下午,解决了这个问题,然后把总结出来的代码,分享了出来. 最近又有一个图片+语音的功能, 更是蛋疼, 本次采用的不是File文件上传,然后转 ...
随机推荐
- 【OpenStack】OpenStack系列15之OpenStack高可用详解
高可用 概念 级别 陈本 如何实现 分类 Openstack的HA 虚拟机的HA 虚拟机HA 比较 应用级别HA,Heat的HA模板 组件的HA 示意图 Mysql的HA 三种方式之一——主从同步 ...
- DropDownList1
循环绑定数据到DropDownList1 foreach (SPList ls in web.Lists) { LIColl.Add(ls.Title);//将数据保存list中 } dwlist.D ...
- location 、history
location.href= location.reload() history.go() 0 1 -1 history.back() history.forward() history.le ...
- eclipse debug source not fount
1.选择Edit Source Lookup Path 2.选择Add 3.选择Java Project 4.选择相应的Project 进行OK确定即可 注意:做完以上的操作,要清除一下原来的断点,然 ...
- 转载一篇关于ios copy的文章
由于原文创作时间较早,一些内容不实用了,我对其进行了加工,去掉了一部分内容,添加了一点注释. 原文连接 http://www.cnblogs.com/ydhliphonedev/archive/201 ...
- CentOS 5.8/6.7若干优化
CentOS系统安装之后并不能立即投入生产环境使用,往往需要先经过我们运维人员的优化才行.在此讲解几点关于Linux系统安装后的基础优化操作.注意:本次优化都是基于CentOS(5.8/6.7). 下 ...
- CSRF和XSS
XSS(跨站脚本攻击): 攻击者发现XSS漏洞——构造代码——发送给受害人——受害人打开——攻击者获取受害人的cookie——完成攻击 XSS是什么?它的全名是:Cross-site scriptin ...
- C++查询网站
1.C++外文api查询 http://www.cplusplus.com/ 2.https://isocpp.org/ 3.Juce学习 http://www.thinksaas.cn/favori ...
- javascript栈的建立样码
早上参加小孩的一年级入学前,看看相关的东东啦.. function Stack() { var items = []; this.push = function(element){ items.pus ...
- android ndk环境配置(转)
转载自:http://jingyan.baidu.com/article/3ea51489e7a9bd52e61bbac7.html android sdk 更新到 r23 时,eclipse 自带 ...