移动端端图片压缩上传

关于图片上传，由于上传图片可能会很大，造成一些麻烦，所以一般压缩后在上传

这里用到的压缩图片的插件是：lrz.mobile.min.js （兼容IOS，android）

CSS：上传成功之前，可以展示上传中的laoding.gif图像设置img背景

background: rgba(0, 0, 0, 0) url(images/loading.gif) no-repeat center;

html结构：

		<p>
			<a href="javascript:void(0)" class="add">+<input type="file" /></a>
		</p>

JS：

		 $(function(){
			 var str='';//用来记录上传成功的图片地址串
			 $('p').on('click','i',function(){
				 $(this).parent().remove();//用来移除图片的 x ×
			 })
			 /* 上传头像图片使用*/
			 function uploadImage(file_obj){
				 var b;
				 var $add_PIc=$(file_obj);//选择这个input元素
				 var fileType=$add_PIc.val().substr($add_PIc.val().lastIndexOf(".")).toLowerCase();//获得文件后缀名
				 if(fileType != '.gif' && fileType != '.png' && fileType != '.jpg' && fileType != '.jpeg' && fileType != 'bmp'){
					 alert("请选择正确格式的图片");
				 }else {
					 var fileName = file_obj.value;//文件名
					 var extension = new String(fileName.substring(fileName.lastIndexOf('.')+1,fileName.length)).toLowerCase();//文件拓展名
					 if (extension == 'jpg'||extension == 'jpeg'||extension == 'png'||extension == 'gif'||extension == 'bmp'){
						 //压缩图片
						 lrz($add_PIc[0].files[0], {
									 width: 700,//图片宽度
									 quality: 0.8 //图片质量
								 },
								 function(rst) {
									 var fileObj = rst.base64; //加密图片流
									 var FileController = "图片服务器地址";
									 // FormData 对象
									 var form = new FormData();
									 form.append("base64Code", fileObj); // 文件对象
									 var xhr = new XMLHttpRequest();
									 xhr.onreadystatechange = zswFun;
									 xhr.open("post", FileController, false);
									 xhr.onload = function (data) {接收到服务器响应};
									 xhr.send(form);
									 function zswFun() {
										 if (xhr.readyState == 4 && xhr.status == 200) {
											 b = xhr.responseText.substring();
											 $('p').find('img').eq(0).attr('src',b);
										 }
									 }
									 $(file_obj).val("");//清空file对象
								 });
					 }
				 }
			 }
			
			 $("input[type=file]").change(function () {
				 var img='<div class="img-box"><i>×</i><img/></div>';
				 var $file = $(this);
				 var fileObj = $file[0];
				 $(this).parent().parent().prepend(img);
				 /*上传图片*/
				 uploadImage(this)
			 });
			 $('.submit').click(function(){
				//将所有img的地址串写在str中
				 for(var i=0;i<$('p img').length;i++){
					str+=$('p img').eq(i).attr('src')+','
				 }
				 str=str.substring(0,str.length-1);
				 if(text.length<10 ||text=='请输入不少于10个字的描述'){
				
					 $.ajax({
						 url:'地址',
						 type:'get',
						 dataType:'jsonp',
						 jsonp:'jsonpcallback',
						 data:{
							data
						 },
						 success:function(data){
							 if(data.success&&data.result>0){							
								//提交成功
				                                 $('p').find('.img-box').remove();//清空内容
							 }else{
								 $('.mask').html(data.message).fadeIn(300);
							 }
							 
						 },
						 error:function(data){
							 $('.mask').html('服务器离家出走了').fadeIn(300);							
						 }
					 })
			
			 })
		 });

　　

　

lrz.mobile.min.js