微信网页开发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,// 必填，签名，见附录1
jsApiList: ["chooseImage","previewImage","uploadImage","downloadImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
});
},/**（编辑表单页面）上传图片第1步@param call 选图后的回调函数*/
onChooseImage : function(call){
var _this = this;
var tmpl = '
删除此图片
取消 ';
$("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另外：需求4、5的实现方式，请参考js代码 对象中的以下方法：onDelFiles()、onTapShowDelSheet()、onPreview()
有何疑问或见解，欢迎各位大佬留言~