JSJDK-预览、选择、上传图片

预览、选择、上传图片，微信都有提供接口，这里记录一下这三个接口在我这里的用处。

1、预览图片：这个比较简单，找到图片一张一张预览就好了，直接上代码吧。

var picList = [];
//循环要预览的图片
$('.photoList>li>img').each(function(index, element) {
	var picUrl = $(this).attr("src");//获取图片路径
	//添加图片预览事件
	picList[index] = picUrl;
       $(this).click(function(){
		wx.previewImage({
			current: picUrl, // 当前显示的图片链接
			urls: picList // 需要预览的图片链接列表
		});
	})
});

2、选择图片：这个也比较简单，微信的帮助文档说的也很清楚。也直接上代码吧。

/**
 *该方法用来选择文件
 */
function selectWXFile(){
	var imgStr="",IDs="";
        //文件上传
	wx.chooseImage({
    	count: 9, // 默认9
	 	sizeType:['original'], // 可以指定是原图还是压缩图，默认二者都有
	 	sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      	success: function (res) {
            IDs = res.localIds;//返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            if (IDs.length == 0) {
                $.Dialog.fail("请先使用 chooseImage 接口选择图片");
                return;
            }
            //进行文件上传
           syncUpload(0,IDs.length,IDs);
      	}
    });
}

注意点：获取到的localIds必须转成String，也就是必须localIds=localIds.toString()再将localIds作为img的src属性才能显示出图片。

3、上传图片：这个有点麻烦，前提条件是在上传多张图片的情况下。因为微信规定的就是每次只能传一张，要想传多张就得一张一张上传。

容易想到的思路就是：文件选择完毕之后在回调函数的success方法中添加循环，循环一张本地ID，上传一张。这个方法在安卓系统中可以实现多张，但是在苹果里只能上传1张，也就是无论选择多少张最后上传到微信服务器的只有1张。我这里采用的是递归的方法，也就是我传完一张在页面显示一张，然后再调用文件上传的办法。（所以在上面的选择文件方法的末尾有上传文件的方法）。

/**
 * 该方法用来上传文件
 * @param start:本地ID开始的下标(当前上传的图片的下标)
 * @param end:本地ID的总个数（也就是选择的图片的总个数）
 * @param IDs:当前批次选择的所有图片在本地ID的集合
 * */
function syncUpload(start,end,IDs){
	start = parseInt(start,10);
	end = parseInt(end,10);
	//alert("start="+start+"\nend="+end);
	if(start<end){
		var localId = IDs[start].toString();
		//alert("本地ID："+localId);
	    wx.uploadImage({
	        localId: localId,
	        isShowProgressTips: 1,//显示进度条
	        success: function (res) {
	            var serverId = res.serverId; // 返回图片的服务器端ID
	            serverId = serverId.toString();
	            //alert("获取到serverID："+serverId);
	            
	            //将选定的图片信息显示到页面
	            var divRanId = parseInt((new Date().getTime())/10,10);
				divRanId="add_"+divRanId;
	            var imgStr="<div id='"+divRanId+"' class='add_file_upload' sign='2'>"+
	            		"<input type='hidden' name='fileServerId' value='"+serverId+"' />" +
						"<img src='"+localId+"' width='85%' height='76%' class='imgClass' onclick='deletePhoto(this);'/>" +
						"<div class='righ'><img src='images/right.png'/></div>" +
						"<form class='box-css'>" +
						"<a class='reduce' href='javascript:void(0);' onclick='reduce(this);'><img src='images/cart_btn_reduce.png'/></a>" +
						"<input style='font-size: 9pt;width:40px;padding:0px; text-align:center; float:left; display:inline-block; height:21px; border-radius:0px;margin:2px 5px; line-height:21px; border:1px solid #828282;color:#828282' type='text' onchange='qty(this);' value='1' size='2' name='fileCount' />" +
						"<a class='adds' href='javascript:void(0);' onclick='addPhotoNum(this);'><img src='images/cart_btn_add.png'/></a>" +
						"</form></div>";
				jQuery("#photoDiv").append(imgStr);//上传成功，添加图片信息
				
				//显示已经上传的图片数量
				var uploadNum = jQuery("#uploadNum").text();
				if(isempty(uploadNum))uploadNum=0;
				uploadNum = parseInt(uploadNum,10);
				uploadNum = uploadNum+1;
				jQuery("#uploadNum").text(uploadNum);//添加数量
				
	            start++;
				//延迟1s，这1s用来显示图片信息，避免出现连续上传几次最后一次性显示图片的问题
	            setTimeout(function(){
	            	syncUpload(start,end,IDs);
	            },1000);
	        }
	    });
	}
};

注意点：

1、传递过来的localId最好也toString()一下，避免上传失败。

2、将选择的图片信息添加到页面的代码最好写在文件上传的方法里，要是单独提出来作为一个方法在这里调用，会出现“文件连续上传几次但是页面不显示图片到最后文件上传的差不多了图片一次性全部加载出来”的问题，同时也可以达到“上传一张显示一张且可以告知文件是否上传成功及上传数量”的效果，后面加的延迟操作也是出于这个考虑。

JSJDK-预览、选择、上传图片

猜你喜欢