微信网页开发wx.chooseImage多图上传、预览（已解决）

需求：

1.调用微信jsSDK选图或者拍照（选图支持选多图）

2.选图或者拍照后提供预览，但不把图片下载到服务器

3.提交表单的时候再一并提交，把图片下载到服务器

4.支持编辑页面删除已选图片（此图已经删除到微信服务器）

5.回到数据列表页后，支持点击预览wx.previewImage

（不建议使用原生的input type=file、enctype="multipart/form-data"的形式进行上传）

我的思路（关于需求1、2、3）：

1.需要初始化jsSDK。

2.点击某个按钮，调用wx.chooseImage给用户展示选图、拍照的选择。

3.用户选择多图或者拍照操作完成后（wx.uploadImage回调中），上传这些图片到微信服务器，同时执行预览的渲染操作。

4.点击保存按钮，提交最后确认的几个图片，访问后台进行图片、数据的保存操作

注：关于java如何保存微信服务器的图片，请参考我的博客《微信网页开发获取token,下载微信服务器上的临时图片》

前端代码：

var basePath = "/demoProject/";
/**常量配置*/
var UPDOC_CONST = {MAX_FILE_NUM : 9//每个动态上传文件的个数
}
//定义后台访问的入口
var srvPaths = {WXJSSDKCONFIG:         basePath + "wx/jsSdk/config"//获取微信jsSdk配置
}
/*--------------------------------------------------------------共用service--------------------------------------------------------------*/
var updocSrv_Commen = {/**共用*/getWxJsSdkConfig : function(params,s,f){$.post(srvPaths.WXJSSDKCONFIG,params||{},function(res){res&&res.success ? s&&s(res) : f&&f(res);});}
}
/*--------------------------------------------------------------END共用service--------------------------------------------------------------*//*--------------------------------------------------------------JS-SDK--------------------------------------------------------------*/
/*图片接口参考：https://blog.csdn.net/fengqingtao2008/article/details/51469705*/
var updoc_wxJsSdk = {/**注入SDK权限配置【思路第1步】*/iniWxJsSDK : function(){var _this = this;//通过config接口注入权限验证配置updocSrv_Commen.getWxJsSdkConfig({url:location.href},function(res){var c = res.result;wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: c.appid, // 必填，公众号的唯一标识timestamp: c.timestamp, // 必填，生成签名的时间戳nonceStr: c.noncestr, // 必填，生成签名的随机串signature: c.signature,// 必填，签名，见附录1jsApiList: ["chooseImage","previewImage","uploadImage","downloadImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});});},/**（编辑表单页面）上传图片第1步@param call 选图后的回调函数*/onChooseImage : function(call){var _this = this;var tmpl = '<li class="weui-uploader__file" data-src="#url#"><img src="#url#" style="width: 100%;max-height: 100%;"></li>'//点击“选图、拍照”按钮触发：【思路第2步】$("body").on("click",".uploaderInput",function(){var $input = $(this);var len = $input.closest(".weui-uploader__bd").find(".weui-uploader__files li").length;//已经选了几张？if(len >= UPDOC_CONST.MAX_FILE_NUM){return false;}var max = UPDOC_CONST.MAX_FILE_NUM - len;//还能选几张图？console.log("wx.chooseImage");wx.chooseImage({count: max, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {//【思路第三步】var localIds = res.localIds;/*这一段是处理页面预览* for (i in localIds) {var src = localIds[i];$input.closest(".weui-uploader__bd").find(".weui-uploader__files").append($(tmpl.replace('#url#', src).replace('#url#', src)));}//是否继续显示上传“+”按钮len = $input.closest(".weui-uploader__bd").find(".weui-uploader__files li").length;//已经选了几张？if(len >= UPDOC_CONST.MAX_FILE_NUM){$input.closest(".weui-uploader__input-box").hide();}var serverIds = [];*/_this.uploadImage(localIds,serverIds,call);}});});},/**（编辑表单页面）上传图片第2步：上传（微信服务器）（uploadImage接口是异步的，但不能同时调用多次，多图需要排队。）*/uploadImage : function(localIds,serverIds,call){var _this = this;if(localIds.length == 0){//所选图全部上传成功了console.log("全部上传成功serverIds："+serverIds);call && call(serverIds);}else{var localId = localIds.pop();console.log("wx.uploadImage");wx.uploadImage({localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {serverIds.push(res.serverId); 返回图片的服务器端IDconsole.log("排队上传图片到微信服务器成功serverId："+res.serverId);_this.uploadImage(localIds,serverIds,call);}});}},/**（编辑表单页面）配合onTapShowDelSheet，点击删除*/onDelFiles : function(call){var max = UPDOC_CONST.MAX_FILE_NUM;//确认删除某一个图$("body").on("click","#iosDelImgActionsheet .del-btn",function(e){$('#iosDelImgActionsheet').removeClass('weui-actionsheet_toggle');$('#iosDelImgMask').fadeOut(200);var index = $(this).attr("data-index");index = index?parseInt(index):-1;$(".attachsPreviewWitchDel li").eq(index).remove();var l = $(".weui-uploader__bd .weui-uploader__files li").length;if(l < max){$(".weui-uploader__bd .weui-uploader__input-box").show();}call&&call(index);})},/**（编辑表单页面）点击一个图，给出删除提示：ActionSheet*/onTapShowDelSheet : function(){var _this = this;$("body").on("click",".attachsPreviewWitchDel li",function(){var index = $(this).index();$('#iosDelImgActionsheet').remove();$('#iosDelImgMask').remove();var tpl = '<div class="weui-mask" id="iosDelImgMask" style="opacity: 0; display: none;"></div> <div class="weui-actionsheet" id="iosDelImgActionsheet"> <div class="weui-actionsheet__title"> <p class="weui-actionsheet__title-text">删除此图片</p> </div> <div class="weui-actionsheet__menu"> <div class="weui-actionsheet__cell weui-cell_warn del-btn" data-index="{{data-index}}">删除</div> </div> <div class="weui-actionsheet__action"> <div class="weui-actionsheet__cell" id="iosDelImgActionsheetCancel">取消</div> </div> </div>';$("body").append(tpl.replace("{{data-index}}",index));var $iosActionsheet = $('#iosDelImgActionsheet');var $iosMask = $('#iosDelImgMask');function showActionSheet() {$iosActionsheet.addClass('weui-actionsheet_toggle');$iosMask.fadeIn(200);}function hideActionSheet() {$iosActionsheet.removeClass('weui-actionsheet_toggle');$iosMask.fadeOut(200);}setTimeout(function(){showActionSheet()},100);$iosMask.on('click', hideActionSheet);$('#iosDelImgActionsheetCancel').on('click', hideActionSheet);});},/**（数据列表页面）点击附件，打开预览*/onPreview : function(){var _this = this;$("body").on("click",".attachsPreview li",function(){var lis = $(this).parent().find("li");var urls = [];$(lis).each(function(i){var url = $(this).attr("data-src");if(url.indexOf("http")!=0 && url.indexOf("https")!=0){//我们数据库存的相对路径，所以需要处理：url = domain + url;}urls.push(url);})wx.previewImage({current: urls[$(this).index()] , // 当前显示图片的http链接$(this).attr("data-src")urls: urls // 需要预览的图片http链接列表});});},init : function(){this.iniWxJsSDK();this.onPreview();this.onTapShowDelSheet();//this.onChooseImage();}
}
/*--------------------------------------------------------------END JS-SDK--------------------------------------------------------------*//*--------------------------------------------------------------班级荣誉save--------------------------------------------------------------*/
var updocCtrl_ClassSaveRongyu = {box : "#classSaveRongyuBox",serverIds : [],//注意：wx.chooseImage所选图最终放到这里/**点击发布【思路第四部】*/onSave : function(){var _this = this;$("body").on("click","#saveFormBtn",function(){var formData = new FormData($("#saveForm")[0]);for (var i = 0; i < _this.serverIds.length; i++) {  if(i<UPDOC_CONST.MAX_FILE_NUM){formData.append("serverIds", _this.serverIds[i]);}}/*这里提交表单，请求后台* updocSrv_Feed.add(formData,function(res){TjDialog.msg("发布成功",500,function(){location.href = srvPaths.CLASSRONGYU;});},function(res){res.msg&&TjDialog.alert(res.msg);})*/});},/**选择文件*/onChooseImage : function(){var _this = this;updoc_wxJsSdk.onChooseImage(function(serverIds){for (var i = 0; i < serverIds.length; i++) {  _this.serverIds.push(serverIds[i]);}})},/**点击删除文件*/onDelFiles : function(){var _this = this;updoc_wxJsSdk.onDelFiles(function(index){_this.serverIds.splice(index, 1);});},init : function(){if($(this.box).length == 0){return false;}this.onSave();this.onChooseImage();this.onDelFiles();}
}
/*--------------------------------------------------------------END班级荣誉save--------------------------------------------------------------*//**===========上面定义了updoc_wxJsSdk、updocCtrl_ClassSaveRongyu，但是如何调用？===========*/
/**===========初始化微信jsSDK、初始化updocCtrl_ClassSaveRongyu===========*/
updoc_wxJsSdk.init();
updocCtrl_ClassSaveRongyu.init();

另外：需求4、5的实现方式，请参考js代码对象中的以下方法：onDelFiles()、onTapShowDelSheet()、onPreview()

有何疑问或见解，欢迎各位大佬留言~

微信网页开发wx.chooseImage多图上传、预览（已解决）相关推荐

php ajax多图上传预览,Ajax上传图片及先预览功能的实现方法
最近有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果, ...
图片上传预览，解决路径为fakepath
相信大家都遇到过用JAVASCRIPT获取一个上传图片的file的值的问题. 百度一下差不多是说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安 ...
JAVA微信公众号开发第8篇JSSDK图片上传预览
简介博主微信JSSDK&图片上传预览基于微信分享做拓展,所以一些配置操作请点击查阅JAVA微信公众号开发第7篇JSSDK&微信分享博文页面 <html><head ...
如何实现上传多个图片并依次展示_js前端实现多图图片上传预览的两个方法(推荐)...
一.将图片转成icon码的实现方式 html代码: js代码 //图片预览功能 function previewImage(file,imgNum) { var MAXWIDTH = 200; var ...
Angular6自定义指令实现多图片上传预览
在做移动端开发多时候经常会遇到用户图片上传的需求,有单图片上传预览的需求,也有多图片上传预览的需求.自己刚遇到这个需求的时候有踩到各种个样到坑.经过多番尝试,下面将本人成功的一个案例分享出来(公司对外 ...
php 图片上传预览(转)
网上找的图片上传预览: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
JavaScript 图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术. 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验. 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难. 不过群众的智慧 ...
ASP.NET工作笔记之一：图片上传预览及无刷新上传
转自:http://www.cnblogs.com/sibiyellow/archive/2012/04/27/jqueryformjs.html 最近项目里面涉及到无刷新上传图片的功能,其实也就是上 ...
模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

微信网页开发wx.chooseImage多图上传、预览（已解决）

微信网页开发wx.chooseImage多图上传、预览（已解决）相关推荐

最新文章

热门文章