单图片上传（可压缩）

最新推荐文章于 2025-08-18 20:10:55 发布

转载最新推荐文章于 2025-08-18 20:10:55 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c3ec3bf6fb9a049a81f974b

文章标签：

#php #java

本文介绍了一种自定义的单图片上传功能实现方法，包括图片预览、修改及压缩处理，解决了大尺寸图片上传效率低的问题。文章详细阐述了使用HTML、CSS和JavaScript（特别是jQuery）进行开发的过程，以及如何通过canvas实现图片压缩。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因项目需求要做一个单图片上传的功能，本来想直接用webUploader做，但是调样式没哟调出来我想要的效果，就想着自己写一个。

就是这么一个简单的样子，添加图片进行预览，再次点击可以修改图片。本来开始做好了之后可以上传了，后来发现手机照的照片都在4、5M，很大，上传很慢，让后就加了一个压缩。本来压缩想使用base64的，然后发现后台不支持，?好尴尬。 look 一下整体代码吧，还是需要jq支持的。

整体代码

<div class="imgUpload">
    <input type="file" accept="image/*" capture="camera" class="imgUploadIpt">
    <img src="1.png" alt="">
</div>
复制代码

.imgUpload {
    width: 88px;
    height: 88px;
    position: relative;
}
.imgUpload input[type='file'] {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    z-index: 2;
}
.imgUpload img {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}
复制代码

function ImgUpload(ele, files, options ) {
    this.ele = ele;//点击的input元素
    this.files = files;//图片file
    this.compression = options.compression || false;//是否开启压缩默认否
    this.maxWidth = options.maxWidth || 800;//压缩最大宽度
    this.maxHeight = options.maxHeight || 800;//压缩最大高度
    this.callback = options.callback;//回调
    this.init();
}
ImgUpload.prototype = {
    init: function () {
        this.onChangeUploadFile();
    },
    onChangeUploadFile: function () {
        var _this = this;
        //判断文件是否添加进来
        if (this.files.length == 0) {
            return false;
        }
        var file = this.files[0];
        //判断上传的是不是图片
        if (file.type.indexOf('image') === -1) {
            alert("您上传的不是图片！");
            return false;
        }
        //上传图片进行最大限制
        var filesize = Math.floor((file.size) / 1024);
        if (filesize > 1024 * 20) {
            alert("上传大小不能超过20M.");
            return false;
        }
        this.ele.parent().find("img").attr("src", window.URL.createObjectURL(file));
        if( !this.compression ) {
            if (this.callback) {
                this.callback( file );
            }
        }else {
            // 压缩图片需要的一些元素和对象
            var reader = new FileReader(), img = new Image();
            //result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容
            reader.readAsDataURL(file);
            // 文件base64化，以便获知图片原始尺寸
            reader.onload = function(e) {
                img.src = e.target.result;
            };
            // 缩放图片需要的canvas
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            img.onload = function () {
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制
                var maxWidth = _this.maxWidth, maxHeight = _this.maxHeight;
                // 目标尺寸
                var targetWidth = originWidth, targetHeight = originHeight;
                // 图片尺寸超过限制
                if (originWidth > maxWidth || originHeight > maxHeight) {
                    if (originWidth / originHeight > maxWidth / maxHeight) {
                        // 更宽，按照宽度限定尺寸
                        targetWidth = maxWidth;
                        targetHeight = Math.round(maxWidth * (originHeight / originWidth));
                    } else {
                        targetHeight = maxHeight;
                        targetWidth = Math.round(maxHeight * (originWidth / originHeight));
                    }
                }
                // canvas对图片进行缩放
                canvas.width = targetWidth;
                canvas.height = targetHeight;
                // 清除画布
                context.clearRect(0, 0, targetWidth, targetHeight);
                // 图片压缩
                context.drawImage(img, 0, 0, targetWidth, targetHeight);
                // canvas转为blob返回
                canvas.toBlob(function (blob) {
                    if (_this.callback) {
                        _this.callback( blob );
                    }
                }, file.type || 'image/png');
            };
        }
    }
}

$('.imgUploadIpt').on('change', function (event) {
    new ImgUpload($(this), event.target.files, {
        compression: true, //开启压缩默认不压缩
        maxWidth: 600, //开启压缩图片最大宽度
        maxHeight: 600, //开启压缩图片最大高度
        callback:function (file) {//回调函数
            console.log(file);
        }
    })
})
复制代码

压缩不压缩可以配置，压缩的话，压缩图片大小可以配置。

预览效果点击这里

如何上传

上传的话需要建一个FormData把要上传的都放到里面就好了。

var formData = new FormData();
formData.append('file','上面拿到的file');
formData.append('parameter1', 'parameter1');
formData.append('parameter2', 'parameter2');
$.ajax({
    url: 'URL',
    type: 'POST',
    async: false,
    data: formData,
    processData: false,
    contentType: false,
    success:function (data) {
        //do something
    },
    error:function (XMLHttpRequest, textStatus, errorThrown) {
        //do something
    }
});
复制代码