前台上传图片压缩,并上传压缩后的图片

<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">{$vo['sdt_name']}：</label></div>
<div class="weui_cell_bd weui-uploader__input-box">
 <input type="file" class="weui-uploader__input" onChange="showPic(this)" accept="image/*" attr="{$vo['sdt_id']}"  name="head_pic[]" />
</div>

</div>

<div class="weui-btn-area" style="margin: 5px;width: 98%;">
   <a class="weui-btn weui-btn_primary" href="javascript:" id="submitPic">提交</a>
   <a class="weui-btn weui-btn_primary" href="javascript:" id="load" style="display:none;">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在提交  </span>
  </a>
</div>  

<script>

var formData = new FormData(); 
var img_num=0;

function showPic(btn){

         var image_url = URL.createObjectURL($(btn)[0].files[0]);
var std_id=$(btn).attr('attr');
$(btn).parent().before('<div><img id="show_img'+std_id+'"style="width: 77px;height: 77px;" src="'+image_url+'"/><input name="convert_img[]" type="hidden"  attr="'+std_id+'"></div>');
$(btn).parent().hide();
 
photoCompress($(btn)[0].files[0], {
             quality: 0.2
         }, function(base64Codes){
       
             var bl = convertBase64UrlToBlob(base64Codes);
             formData.append("img"+img_num, bl, "file_"+Date.parse(new Date())+".jpg"); 
             img_num++;
     })

}

function photoCompress(file,w,objDiv){
            var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
            ready.readAsDataURL(file);
            ready.οnlοad=function(){
                var re=this.result;
                canvasDataURL(re,w,objDiv)
            }
        }
        function canvasDataURL(path, obj, callback){
            var img = new Image();
            img.src = path;
            img.onload = function(){
                var that = this;
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = 0.7;  // 默认图片质量为0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                    quality = obj.quality;
                }
                // quality值越小，所绘制出的图像越模糊
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
        }
        /**
         * 将以base64的图片url数据转换为Blob
         * @param urlData
         *            用url方式表示的base64图片数据
         */
        function convertBase64UrlToBlob(urlData){
            var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }

$("#submitPic").click(function(){

$("#load").show();
$("#submitPic").hide();

var cust_id={$cust_id};

var obj=$("input[name='convert_img[]']");

var sdt_id=new Array();
obj.each(function(){

var tmp_id=$(this).attr('attr'); 
sdt_id.push(tmp_id);
}) 


console.log(sdt_id);
if(sdt_id.length==0){
$.toptip('请选择上传的图片');
return;

}

    var xmlHttp = new XMLHttpRequest();
     xmlHttp.open("POST", '{:U("Customer/pic")}'); //注意跨域问题
     xmlHttp.send(formData);
     xmlHttp.onload = uploadComplete; //请求完成
     xmlHttp.onerror =  uploadFailed; //请求失败

})

function uploadComplete(evt) {}

function uploadFailed(evt) {
            alert("上传失败！");
        }

</script>