移动端端图片压缩上传

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

这里用到的压缩图片的插件是：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