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 ...
随机推荐
- 关于FTP操作的功能类
自己在用的FTP类,实现了检查FTP链接以及返回FTP没有反应的情况. public delegate void ShowError(string content, string title); // ...
- 仿知乎安卓client滑动删除撤销ListView
标签(空格分隔): Android 新版的知乎安卓client有一个有趣的功能,就是在一个item里.向右滑动时整个item会越来越透明,滑动到一半时,整个item就不见了.放开手指就是删除.删除后还 ...
- iOS开发关于AppStore程序的上传流程
主要内容: 1.创建唯一标示符App ID(前提是你的程序在真机上测试没有任何问题) 2.申请发布证书 3.申请发布描述文件 4.iTunes Connect创建App并填写信息 5.选择证书编译打包 ...
- AFNetworking3.0的基本使用方法
前一段时间在做项目的时候发现AFNetworking3.0已经被大众所接受,所以以后肯定会有很多程序猿朋友必须了解和转移至3.0了,这是我这段时间使用和学习总结出来的一些常用的知识点,希望对大家有用. ...
- DZNEmptyDataSet框架简介
给大家推荐一个设置页面加载失败时显示加载失败等的框架. 下载地址:DZNEmptyDataSet https://github.com/dzenbot/DZNEmptyDataSet 上效果首先在你的 ...
- java 如何自定义异常 用代码展示 真心靠谱
先建两个自定义的异常类 ChushufuException类 class ChushufuException extends Exception { public ChushufuException( ...
- spring-mvc关键点掌握 high level
在本例中,我们将使用Spring MVC框架构建一个入门级web应用程序.Spring MVC 是Spring框架最重要的的模块之一.它以强大的Spring IoC容器为基础,并充分利用容器的特性来简 ...
- tomcat虚拟主机虚拟目录配置
今天着实要记上一笔,需要配置tomcat虚拟目录的问题 一 首先看两个名词 appBase -- 顾名思义 就是你app所在的目录,目录下面的子目录将自动被部署为应用:war被解压并部署 docBas ...
- JProtector 帮助文档
一.应用加密 1.使用 JProtector在线 进行应用加密:使用浏览器访问 http://app.shuton.net/encryptjar, 点击 Browse 选择待加密的应用jar包.war ...
- jsp字段判空
是对象吧String jsp的写法 <% if(str == null) { %> str is null <% } else { %> str not null <% ...