图片上传压缩图片大小

最新推荐文章于 2022-01-18 14:45:28 发布

weixin_30553065

最新推荐文章于 2022-01-18 14:45:28 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/web-qianhx/p/10271530.html

版权

本文介绍了一个使用HTML、JavaScript和jQuery实现的图片上传功能，包括图片格式验证和大小超过1M时的压缩上传处理。通过FormData对象发送POST请求，并利用canvas进行图片压缩。

摘要由CSDN通过智能技术生成

//html
<ul class="ul-upload">
    <li></li>
    <li></li>
</ul>
<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" id="uploadFile" name="uploadFile">
</form>
//js
$(".ul-upload li").click(function() {
    $("#uploadFile").click();
});
$("#uploadFile").change(function() {
    var val = $(this).val();
    if (val != null && val != '') {
        var temp = val.substring(val.indexOf(".") + 1);
        if (temp == 'png' || temp == 'jpg') {
        var fileObj = document.getElementById("uploadFile").files[0]; // js
        var form = new FormData(); // FormData 对象
        imgCallBack(fileObj,form)
        } else {
        alert("请选择后缀为png、jpg的图片上传!")
        }
    }
});
function imgCallBack(fileObj,form) {
    if (fileObj.size / 1024 > 1025) { // 大于1M，进行压缩上传
        photoCompress(fileObj, {
                    quality : 0.2
                }, function(base64Codes) {
                    var bl = convertBase64UrlToBlob(base64Codes);
                    form.append("file", bl, "file_" + Date.parse(new Date()) + ".jpg"); // 文件对象
                    $.ajax({
                        url :'',
                        type : 'POST',
                        data : form,
                        async : false,
                        cache : false,
                        contentType : false,
                        processData : false,
                        success : function(data) {
                            
                        }
                    });
                });
    } else {
        form.append("file", fileObj); // 文件对象
        $.ajax({
                    url :'',
                    type : 'POST',
                    data : form,
                    async : false,
                    cache : false,
                    contentType : false,
                    processData : false,
                    success : function(data) {
                        
                    }
                });
    }
}
function photoCompress(file, w, objDiv) {
    var ready = new FileReader();
    ready.readAsDataURL(file);
    ready.onload = 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);
    }
}
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
            });
}