图片压缩 图片上传

  1<input class="form_upload_input" type="file" name="upload_input" accept="image/jpeg,image/png" title="上传图片"/>
　　 
　　function getObjectURL(file){
    var url = url;
    if(window.createObjectURL != undefined){
         url = window.createObjectURL(file);
    }else if(window.URL != undefined){
         url = window.URL.createObjectURL(file);
    }else if(window.webkitURL != undefined){
         url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
//获取图片的src方法

var inputFile = $('.form_upload_input');

inputFile.on('change',function(){

    var that = this.files,
        i=0,
        self=$(this),
        filesLen=that.length;

    $('.imgupload_progress[for='+self.attr('for')+']').show();
    self.parent('span').hide;
    for(i=0; i<filesLen; i++){
        (function(i){
            var newImg = new Image();
            var w = 0,n=0,h=0;
             newImg.src = getObjectURL(that[i]);//获取此次上传图片的地址
             var M = that[i].size;//获取图片的大小
             M = M/1024;
             M = M/1024;//换算成M为单位的图片
            newImg.onload = function(){
                w = newImg.naturalWidth;//获取上传图片的宽度
                h = newImg.naturalHeight;//获取上传图片的高度
                if( M > 2){//图片的大小大于2M就让他的宽度*0.8,用来限制图片压缩时图片的做大宽度
                    w *= 0.8;
                }
                if(M <= 2){ //图片小于2M不做压缩处理
                      var f = new FormData();//创建 formdate 对象，利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　//我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
                        f.append('upload_img',that[i]);// that[i]中已经包含了用户所选择的文件
                        var xhr = new XMLHttpRequest();
                            xhr.open('POST', 'url');
                            xhr.onload = function () {
                                if (xhr.status === 200) {
                                    // self.attr('value', '');
                                    var data = $.parseJSON(xhr.responseText);     80                                 }      
                            };
                            xhr.onerror = function () {
                                $('.imgupload_progress[for='+self.attr('for')+']').hide();
                                self.parent('span').show();
                                $.messager.alert('提示', '图片上传失败', 'info');
                            };
                            xhr.upload.onprogress = function (e) {
                                // 上传进度
                                var percentComplete = ((e.loaded / e.total) || 0) * 100;
                            };
                            xhr.send(f);

                }else{//图片压缩处理
                    n = 0.7;
                    lrz(that[i], {width:w,fieldName: 'upload_img',quality: n}).then(function(rst){
                        var xhr = new XMLHttpRequest();
                            xhr.open('POST', 'url');
                            xhr.onload = function () {
                                if (xhr.status === 200) {
                                   126                                 }      
                            };
                            xhr.onerror = function () {
                                $('.imgupload_progress[for='+self.attr('for')+']').hide();
                                self.parent('span').show();
                                $.messager.alert('提示', '图片上传失败', 'info');
                            };
                            xhr.upload.onprogress = function (e) {
                                // 上传进度
                                var percentComplete = ((e.loaded / e.total) || 0) * 100;
                            };

                            // 添加参数
                            rst.formData.append('fileLen', rst.fileLen);

                            // 触发上传
                            xhr.send(rst.formData);

                            /* ==================================================== */
                        return rst;
                    });
                }
                console.log(w,h,i); //输出图片的宽度、高度、循环图片该图片下标   
            } 
        })(i);
    }    
});

 ps：需要引入<script src="/js/lrz.all.bundle.js"></script>