图片上传之原生方法

图片上传、压缩、回显、缩略图放大、删除、下载，可以参考这儿（h5方法）
https://github.com/zhangstar1331/pictureUpload
效果展示

背景

图片上传，我们一般用下面的H5方法，但是在安卓手机上无法一次性上传多张图片。为了能满足情况，如果是微信公众号项目，可以调用微信上传接口来实现。

<input class="hidden-input"  type="file" accept="image/*" style="height: 71px;opacity: 0;" multiple/>

图片上传之调用微信接口

1、h5页面引入微信js

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>

2、调用后台接口，进行微信初始化配置

$.ajax({url : "/cic-crm-web/cic/getConfig.do",async : true,type : "POST",headers: {"token":token},data : {"url" : encodeURIComponent(location.href.split('#')[0])},dataType : "json",success : function(data) {if (data != null) {conf = {'timestamp':data.timestamp, 'nonceStr':data.nonceStr, 'signature':data.signature};wx.config({debug : false,appId : "",timestamp : data.timestamp, //时间戳nonceStr : data.nonceStr, //随机字符串signature : data.signature, //得到的签名jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','chooseImage','previewImage','uploadImage','downloadImage'] // 功能列表，我们要使用JS-SDK的什么功能});}}})

3、调取摄像头和相册获取图片

	$('#idPartView .hidden-input').on('click', wxLoadImage.getImage);var num = 0;//调用微信api获取照片var wxLoadImage = {picId:null,//获取签名信息init:function(){},//调取摄像头和相册获取图片getImage:function(){//配置一次最多上传几张图片var count = 9;wxLoadImage.picId = $(this).parent();if (wxLoadImage.picId.parent().hasClass('onePicLimit')) {count = 2;}wx.ready(function () {//调取摄像头和相册var localIds = [];var leng = 0;wx.chooseImage({count: count, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {localIds = localIds.concat(res.localIds); // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片leng = localIds.length;if(window.__wxjs_is_wkwebview){//判断ios是不是用的 wkwebview 内核 for(var i = 0; i < leng; i++ ){num++;wxLoadImage._getIosImage(localIds[i],num)}}else{for(var i = 0; i < leng; i++ ){num++;//安卓这块拿到的是地址，不是base64等具体图片数据wxLoadImage._showImage(localIds[i],num)}}}});})},//IOS处理_getIosImage:function(e,num){var iosLocalId = [];wx.getLocalImgData({localId: e, // 图片的localIDsuccess: function (res) {                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示localData = localData.replace('jgp', 'jpeg');//iOS 系统里面得到的数据，类型为 image/jgp,因此需要替换一下 iosLocalId.push(localData);for(var i = 0; i < iosLocalId.length; i++){wxLoadImage._showImage(iosLocalId[i],num)}      },fail:function(res){alert("显示失败");}});},//展示图片_showImage:function(data,num){var html = '<span class="addPhoto" id="addPhoto_' + num + '" style="height: 71px;"><i class="select-no deletePhoto" id="deletePhoto_' + num + '"></i><img class="smallImage" id="smallImage_'+ num + '" alt="" src="" uri="" index=' + num + ' width="100%" height="100%"/></span>';wxLoadImage.picId.before(html);var parentDiv = wxLoadImage.picId.parent();var smallImage = parentDiv.find('.smallImage');var smallImageLen = smallImage.length;if (wxLoadImage.picId.parent().hasClass('onePicLimit')) {if(smallImageLen>=2){parentDiv.find('.onePhoto').hide();}}else if (wxLoadImage.picId.parent().hasClass('validateInfo')) {if(smallImageLen>=10){parentDiv.find('.onePhoto').hide();}}else if(wxLoadImage.picId.parent().hasClass('noPicLimit1')){if(smallImageLen>=14){parentDiv.find('.onePhoto').hide();}}console.log(data)$('#smallImage_' + num).attr('src',data)console.log($('#smallImage_' + num).attr('src'))wxLoadImage._deletePhoto(num)wxLoadImage._onLoadPhoto("#addPhoto_" + num, data);setTimeout(function() {myScroll2.refresh();}, 300);},//上传图片，因为安卓src那块塞得是地址，不是具体的图片数据，所以不能直接调用别的接口上传图片数据流。这块可以将获取到的微信数据上传到服务器，然后让后端再去服务器上下载下来，存到本地服务器_syncUpload:function(localIds){var localId = localIds.pop();wx.uploadImage({localId: localId,//需要上传的本地IDisShowProgressTips:0,success: function (res) {var serverId = res.serverId; // 返回图片的服务器端IDserverids.push(serverId);//其他对serverId做处理的代码if(localIds.length > 0){syncUpload(localIds);}if(leng==serverids.length){var json = {};for(var i=0;i<serverids.length;i++){json[i]=serverids[i];}var serids=JSON.stringify(json);}}});},//删除图片_deletePhoto: function(num) {$('#deletePhoto_' + num).on("click", function(e) {$('#addPhoto_' + num).parent().find('.onePhoto').show();$('#addPhoto_' + num).remove();e.stopPropagation();});},//点击图片时加载大图_onLoadPhoto: function(iconPicture, imgUrl) {$(iconPicture).on('click', function() {try {var img = new Image();img.src = imgUrl;var width;var height;if (img.complete) {width = img.width;height = img.height;} else {img.onload = function() {width = img.width;height = img.height;};}var top = 0;var left = 0;var windowWidth = $(window).width();var windowHeight = $(window).height();if (width > windowWidth) {var proportion = windowWidth / width;width = windowWidth;height = height * proportion;} else if (width < windowWidth) {left = (windowWidth - width) / 2;}if (height < windowHeight) {top = (windowHeight - height) / 2;}var html = '';html += '<div class="jumpbox2 displayN preImg panel" id="preImg" style="top:0;background:#000;width:100%;height:100%">';html += '<div style="position:absolute; z-index:999;top:' + top + 'px;left:' + left + 'px;overflow:hidden;">';html += '<img id="preImage" style="vertical-align: middle;margin:0 auto;" alt="" src="' + imgUrl + '" width="' + width + '" height="' + height + '">';html += '</div></div>';$('body').append(html);$('#preImg').bind('click', function() {$('#preImg').hide();$('#preImg').unbind('click');$('#preImg').remove();});setTimeout(function() {$('#preImg').show();}, 200);} catch (e) {alert(e.name + '  ' + e.message);}});}}