移动端图片压缩上传

window.changepic4 = function() {
    var file = $("#form").find("input")[3].files[0];
    var rFilter = /^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/i;
    if(!rFilter.test(file.type)) {
        alert("文件格式必须为图片");
        return;
    }
    /*开始进行网络加载*/

    var reader = new FileReader() , image = new Image() ,
        canvas = document.createElement("canvas") , ctx = canvas.getContext("2d");
    reader.onload = function() {        //文件加载完成
        var url = reader.result;
        image.src = url;
    };
    image.onload = function() {        //图片加载完成
        var w = image.naturalWidth , h = image.naturalHeight ,
            scale = 2;        //图片缩放比例,这里是把图片大小高宽均缩小3倍
        canvas.width = w / scale;
        canvas.height = h / scale;
        ctx.drawImage(image, 0 , 0 , w , h ,
            0 , 0 , canvas.width , canvas.height);
        fileUpload();    
    };
    reader.readAsDataURL(file);        //用文件加载器加载文件
    function fileUpload() {        //文件上传方法
        var quality = 0.2;        //图片的质量,这里设置的是0.3
        var data = canvas.toDataURL("image/jpeg", quality);//获取画布图片,并且要jpg格式
        data = data.split(',')[1];
        data = window.atob(data);
        var ia = new Uint8Array(data.length);
        for(var i = 0; i < data.length; i++) {
            ia[i] = data.charCodeAt(i);
        }
        var blob4 = new Blob([ia], {            //以上均为二进制参数处理,从而获取一个blob对象
            type: "image/jpeg"
        });
    var fd = new FormData(document.getElementById("form4"));
    fd.append('jsonStr',jsonStr);
    fd.append('token',token);
        fd.append("leader_IDZ"  , blob4 , "leader_IDZ.jpg");    //向form中加入图片数据,name属性是XXX,文件名是upload.jpg
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('load', function(resUpload) {
     
            //请求成功
        }, false);
        xhr.addEventListener('error', function(){
       
            //请求失败
        }, false);
        xhr.addEventListener('abort', function(){
        
            //上传终止
        }, false);
        xhr.open('POST', "http://ap.jvjiewang.com/Seller/Shop/OpenExamine");//请求地址
        xhr.send(fd);//发送
    }
};

猜你喜欢

转载自blog.csdn.net/qq_38674970/article/details/80940145