使用lrz插件实现图片压缩用ajax提交

点击下载插件

先在页面上引用一下插件js

1.首先获取到图片流

 $(function() {
        	 $('#img1').change(function() {
	            if (!this.files[0].type.match('image.*')) {
	           	 mui.alert("图片格式不正确!","提示", null);
	                    return false;
	         } 
	              	
        	var file = this.files[0];
        	lrz(file,{width:450,quality:0.7})//这里可以自定义一下图片压缩比率和压缩后的宽高
        	.then(function(rst){
        	var img = new Image();
        	img.src = rst.base64;//将压缩后的base64赋给img的src,然后可以赋给标签的src属性
        	base = rst.base64;
        	$("#img1").attr('src',img.src);//将压缩后的图片显示预览
        	$("#imge1").attr('src',img.src);

		//因为我这里需要上传四张图片，所以我的处理方式是将压缩的图片base64编码添加到一个数组，这里只给出一个。
		imgArry[0]="{"+"Img1:"+base+"}"; }); });

2.使用ajax提交

如果要使用jQuery ajax提交就要结合FormData对象，可以把form中所有表单元素的name与value组成一个你想要的key-value形式的参数，提交到后台。

关于FormData的介绍

FormData的使用方法：

a.创建一个空的FormData对象

var formData = new FormData();
formData.append("name",name);

b.直接获取form表单

 var fd = new FormData(document.getElementById("myform"));

使用ajax提交到后台：

首先我们需要将图片数组添加到FormData对象

fd.append("Img1",JSON.stringify(imgArry)); //转成json 

提交：

		$.ajax({
    			url : "${path}/web/merchants/personalInfo",
    			type : "post",
    			dataType : "json",
    			processData: false,//这两个属性必须设置为false
    			contentType: false,
    			data:  fd,
    			success : function(data) {
    				if (data.status == 'success') {
    					mui.alert(data.message , "提示" );
    						window.location.href = "${path }/web/user/personalInformation";
    					window.event.returnValue = false;
    				} else {
    					mui.alert(data.message , "提示");
    				}
    			}
    		});

3.后台接收处理

直接获取数组

String img = request.getParameter("Img1");
JSONArray array = JSONArray.fromObject(img);

将base64格式的编码转成图并上传到服务器相关目录下:

解码需要sun.misc.BASE64Decoder.jar这个jar包，点击这里下载

	int i = 0;
	for (int j=0;j