图片压缩后上传（压缩工作在前端完成）

本文只是经# 图片纯前端JS压缩的实现核心代码的简单修改后的多图片上传版本；

HTML

<div id="effect" class="part">
    <h3>效果（400x400限制）：</h3>
    <div class="show">
        <div class="demo">
            <p><input id="file1" type="file" multiple="true" accept="image/gif, image/png, image/jpg, image/jpeg"></p>
            <p id="log"></p>
        </div>

        <button id="upd" type="button" class="btn btn-secondary" >文件上传</button>
    </div>
</div>

JS变量及辅助函数

    var eleFile = document.querySelector('#file1');

    // 压缩图片需要的一些元素和对象
    var reader = new FileReader(), img = new Image();
    // 缩放图片需要的canvas
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    var mul_file = new Array();
    var file_size = 0;
    var blobs = new Array();
    var time = 0;
    var time_unit = 30;

    function isInArray2(arr,value){
        var index = $.inArray(value,arr);
        if(index >= 0){
            return true;
        }
        return false;
    }

    eleFile.addEventListener('change', function (event) {
        mul_file = [];
        blobs = [];
        for (var i=0;i<event.target.files.length;i++)
        {
            mul_file.push(event.target.files[i]);
        }

        file_size = mul_file.length;
        time = file_size * time_unit;
        console.log("**file_size:"+file_size);

        if (mul_file) {
            [].forEach.call(mul_file, readAndPreview);
        }
    });

JS核心

      function readAndPreview(file) {
        // 确保 `file.name` 符合我们要求的扩展名
        if (file.type.indexOf("image") == 0) {
            var reader = new FileReader();
            var image = new Image();

            reader.onload = function(e) {
                image.src = e.target.result;
            };

            reader.readAsDataURL(file);

            image.onload = function(){
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;
                // 最大尺寸限制
                var maxWidth = 400, maxHeight = 400;
                // 目标尺寸
                var targetWidth = originWidth, targetHeight = originHeight;
                // 图片尺寸超过400x400的限制
                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(image, 0, 0, targetWidth, targetHeight);
                // canvas转为blob并上传
                canvas.toBlob(function (blob) {
                    if(!isInArray2(blobs,blob)){
                        blob.name = file.name;
                        blobs.push(blob);
                        console.log(blob);
                    }
                }, file.type || 'image/png');

                file_size--;
                if(file_size === 0){
                    setTimeout(() => {
                        for(var j=0;j<blobs.length;j++){
                            var blob = blobs[j];
                            var img = document.createElement("img");
                            img.onload = function(e) {
                                window.URL.revokeObjectURL(img.src); // 清除释放
                            };
                            img.src = window.URL.createObjectURL(blob);
                            document.body.appendChild(img);
                        }
                    },time);
                }
            }
        }
    }

文件对象封装及上传触发

$('#upd').click(function (e) {
        var formData = new FormData();
        for(var i = 0;i<blobs.length;i++){
            formData.append("file",blobs[i],blobs[i].name);
        }

        $.ajax({
            url: "/uploadImg1",
            data:formData,
            type:'post',
            contentType:false,
            processData:false,
            success:function(data) {
                alert("Data Loaded: " + data);
            }
        });
    })

后端数据接收解析及保存

    @RequestMapping("/uploadImg1")
    @ResponseBody
    public String upload1(@RequestParam("file") MultipartFile[] files,Model model)  {
        if (files.length < 1) {
            return "上传失败，请选择文件";
        }
        for (int i = 0; i < files.length; i++) {
            MultipartFile file = files[i];
            String fileName = file.getOriginalFilename();
            File dest = null;
            String os = System.getProperty("os.name");
            if (os.toLowerCase().startsWith("win")) {
                String path = "d:"+File.separator+"img"+File.separator;
                dest= new File(path + fileName);
            }else {
                String path = "/webapps/img/";
                dest= new File(path + fileName);
            }
            try {
                file.transferTo(dest);
            } catch (IOException e) {
                return JSON.toJSONString("上传失败！");
            }
        }
        return JSON.toJSONString("上传成功！");
    }