jssdk微信图片上传功能
/*wx.config({
debug: false,
appId: data.appid,
timestamp: data.timestamp,
nonceStr: data.nonceStr,
signature: data.signature,
jsApiList: ['checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage']
});
wx.ready(function () {
//
});*/
//onclick事件
var images = {
localId: [],
serverId: [],
downloadId: []
};
document.querySelector('#selectImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
jQuery(function(){
$.each( res.localIds, function(i, n){
$("#img").append('<img src="'+n+'" /> <br />');
});
});
}
});
};
document.querySelector('#uploadImage').onclick = function () {
if (images.localId.length == 0) {
alert('请先使用选择图片按钮');
return;
}
images.serverId = [];
jQuery(function(){
$.each(images.localId, function(i,n) {
wx.uploadImage({
localId: n,
success: function (res) {
images.serverId.push(res.serverId);
alert(res.serverId);
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
});
});
};
document.querySelector('#downloadImage').onclick = function () {
if (images.serverId.length == 0) {
alert('请先按上传图片按钮');
return;
}
jQuery(function() {
$.each(images.serverId, function (i, n) {
wx.downloadImage({
serverId: n,
success: function (res) {
images.downloadId.push(res.localId);
}
});
});
$.each( images.downloadId, function(i, n){
alert(n);
$("#img2").append('<img src="'+n+'" /> <br />');
});
});
};
document.querySelector('#previewImage').onclick = function () {
var imgList = [
'http://wp83.net__PUBLIC__/images/gallery/image-1.jpg',
'http://wp83.net__PUBLIC__/images/gallery/image-2.jpg'
];
wx.previewImage({
current: imgList[0],
urls: imgList
});
};
//返回错误
wx.error(function(res){
var str = res.errMsg;
var reg = /invalid signature$/;
var r = str.match(reg);
if(r !== null) {
jQuery(function(){
$.getJSON('http://www.demo.com/tp/home/index/ticket', function(data) {
if(data) {
alert('ticket update');
location = location;
window.navigate(location);
}
});
});
}
});
jssdk微信图片上传功能的更多相关文章
- android之使用GridView+仿微信图片上传功能
由于工作要求最近在使用GridView完成图片的批量上传功能,我的例子当中包含仿微信图片上传.拍照.本地选择.相片裁剪等功能,如果有需要的朋友可以看一下,希望我的实际经验能对您有所帮助. 直接上图,下 ...
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
仿照微信,朋友圈分享图片功能 .可以进行图片的多张选择,拍照添加图片,以及进行图片的预览,预览时可以进行缩放,并且可以删除选中状态的图片 .很不错的源码,大家有需要可以下载看看 . 微信 微信 微信 ...
- 前端丨如何使用 tcb-js-sdk 实现图片上传功能
前言 tcb-js-sdk 让开发者可以在网页端使用 JavaScript 代码服务访问云开发的服务,以轻松构建自己的公众号页面或者独立的网站等 Web 服务.本文将以实现图片上传功能为例,介绍 tc ...
- thinkphp达到UploadFile.class.php图片上传功能
片上传在站点里是非经常常使用的功能.ThinkPHP里也有自带的图片上传类(UploadFile.class.php) 和图片模型类(Image.class.php).方便于我们去实现图片上传功能,以 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(七)图片上传功能
日常啰嗦 前一篇文章<Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合>讲了富文本编辑器UEditor的整合与使用 ...
- PHP语言学习之php做图片上传功能
本文主要向大家介绍了PHP语言学习之php做图片上传功能,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 今天来做一个图片上传功能的插件,首先做一个html文件:text.php < ...
- [Ting's笔记Day8]活用套件carrierwave gem:(3)Deploy图片上传功能到Heroku网站
前情提要: 身为Ruby新手村民,创造稳定且持续的学习步调很重要,我用的方法就是一周在IT邦写三篇笔记,希望藉由把笔记和遇到的bug记录下来的过程,能帮助到未来想用Ruby on Rails架站的新手 ...
- 微信图片上传,遇到一个神奇的jgp
微信图片上传,获取图片base64遇到一个神奇的 jgp var imgFn = function (event) { event.preventDefault(); var id = '#'+$ ...
- H5 利用vue实现图片上传功能。
H5的上传图片如何实现呢? 以下是我用vue实现的图片上传功能,仅供参考. <!DOCTYPE html> <html> <head> <meta chars ...
随机推荐
- 在CTime类中重载<<和>>
程序代码: #include <iostream> using namespace std; class CTime//时间类 { private: unsigned short int ...
- ThinkPHP - 自动创建 + 自动验证 + 自动完成
自动创建:创建数据模型. $User->create(); 自动验证:验证提交的表单数据. protected $_validate = array( array('verify','requi ...
- ubuntu使用postgist,pgrouting
安装过程 一 :所需组件1 PostgreSQL 9.4 or higher.2 Proj4 .reprojection library.3 GEOS .geometry library.4 LibX ...
- emacs打开乱码解决办法
前言:有时候我们使用emacs打开文件的时候,因为emacs默认编码跟文档编码不同而出现了乱码如图: 对于新手的我们应该通过以下两种途径来解决: 方法一: 只需C-x <RET> r ( ...
- 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理
最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...
- BZOJ 1925: [Sdoi2010]地精部落( dp )
dp(i,j)表示1~i的排列中, 以1~j为开头且开头是下降的合法方案数 这种数列具有对称性, 即对于一个满足题意且开头是上升的n的排列{an}, 令bn = n-an+1, 那么{bn}就是一个满 ...
- PHPer的等级划分
PHPer的等级划分 前一段时间刚刚完成PHP的培训,然后想知道自己目前的水平(或者说等级),并且应该在哪些方面进行提高,所以在网上查了一下相关介绍.其中有一篇介绍讲的挺清楚的,至少目前的我还是很认同 ...
- Chapter 12 外观模式
外观模式:为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个模式使得这一子系统更加容易使用. 外观模式三个阶段: 首先,在设计初期阶段,应该要有意识的将不同的两个层分离. 其次,在 ...
- kingso - / - Taocode
kingso - / - Taocode 这两天在线下搭建了kingso示例服务,有兴趣的同学请自取. 源代码位置:192.168.201.73:9022 /home/wcm/kingso 安 ...
- leetcode第一刷_Maximal Rectangle
这个题比刚才那个更难. 假设没做过上一个,这个简直是无情. 先想一个笨笨的解法,如何确定一个矩形呢?找一个左上角,然后每行的看能延伸到什么位置.注意随着行数的添加,列数是仅仅能变短,不能变长. 想一下 ...