web端多图片同时上传

使用效果展示，图片样式可以自行修改

编码实现

html

 <div class="form-group">
  <div class="col-sm-2 control-label" style="padding-top: 10px">房屋照片</div>
    <div class="col-sm-10">
        <div id="inputBox">
            <input type="file" name="file" title="请选择图片(最多6张)" id="file" multiple="multiple"
                   accept="image/png,image/jpg,image/gif,image/JPEG"/>选择图片(最多6张)
        </div>
        <div id="imgBox"></div>
    </div>
</div>

js

$(function () {
    $("#file").on("change", function() {
        //获取type=file的input
        var fileImg = $("#file")[0];
        //得到所有的图片列表
        var fileList = fileImg.files;
        for(var i = 0; i < fileList.length; i++) {
            //得到每个图片的路径
            var imgSrcI = getObjectURL(fileList[i]);
            //向文件名的数组末尾添加此文件名
            imgName.push(fileList[i].name);
            //向路径的数组末尾添加路径
            imgSrc.push(imgSrcI);

            //图片压缩判断
            var pic = fileList[i];
            if(pic.size/1024 > 100){ //大于100k，进行压缩上传
                photoCompress(pic, {
                    quality: 0.2
                }, function(base64Codes){
                    var bl = convertBase64UrlToBlob(base64Codes);
                    //在文件流数组的末尾添加文件
                    imgFile.push(bl);
                });
            }else{
                //在文件流数组的末尾添加文件
                imgFile.push(pic);
            }
        }
        //将图片展示出去
        addNewContent('#imgBox');
    });
})

var imgSrc = [];  //存放图片路径
var imgFile = []; //存放文件流
var imgName = []; //存放图片名字
/**
 * 上传图片到后台
 * @param num 图片的最大数量
 * @param url 上传接口路径
 * @param data  需要同时上传的表单数据 json字符串
 * @returns {boolean}
 */
function uploadUnitInfo(num, url, data){
    if(!limitNum(num)){
        alert("最多只能上传"+num+"张照片!");
        return false;
    }

    //用FormData对象上传
    var fd = new FormData();
    //由于fd对象中已经包含<input type='file'>的input标签，如果不删除，就会造成重复上传
    fd.delete("file");
    //将文件流循环添加到FormData对象中
    for(var i=0; i<imgFile.length; i++){
        fd.append('file',imgFile[i], "file_"+Date.parse(new Date())+".jpg");
    }
    fd.append('params', data);
    //上传所有的图片
    submitPicture(url, fd);
}
//上传(将文件流数组传到后台)
function submitPicture(url,data) {
    if(url&&data){
        $.ajax({
            type: "post",
            url: url,
            async: true,
            data: data,
            //下面这两个要写成false，要不然上传不了。
            processData: false,
            contentType: false,
            success: function(r) {
                if (r.code === 0) {
                    alert('操作成功', function(index) {
                        vm.reload();
                    });
                } else {
                    alert(r.msg);
                }
            }
        });
    }else{
        alert('数据格式不正确!');
    }
}

//图片展示
function addNewContent(obj) {
    $(obj).html("");
    for(var a = 0; a < imgSrc.length; a++) {
        var oldBox = $(obj).html();
        $(obj).html(oldBox + '<div class="imgContainer">'
                +'<img class="up_image" title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' οnclick="imgDisplay(this)">'
                +'<p οnclick="removeImg(this,' + a + ')" class="imgDelete">删除</p>'
            +'</div>');
    }
}
//删除
function removeImg(obj, index) {
    //向数组中删除元素
    imgSrc.splice(index, 1);
    imgFile.splice(index, 1);
    imgName.splice(index, 1);
    var boxId = "#" + $(obj).parent('.imgContainer').parent().attr("id");
    addNewContent(boxId);
}
//限制图片个数
function limitNum(num){
    if(!num){
        return true;
    }else if(imgFile.length>num){
        return false;
    }else{
        return true;
    }
}

//当鼠标移到图片上时，显示x删除
function imgDisplay(obj) {
    var src = $(obj).attr("src");
    var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;">'
            +'<img src=' + src + ' style="margin-top: 100px;width: 70%;margin-bottom: 100px;"/>'
            +'<p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="closePicture(this)">×</p>'
        +'</div>'
    $('body').append(imgHtml);
}
//关闭
function closePicture(obj) {
    $(obj).parent("div").remove();
}
//图片预览路径
function getObjectURL(file) {
    var url = null;
    if(window.createObjectURL != undefined) { // basic
        url = window.createObjectURL(file);
    } else if(window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
    } else if(window.webkitURL != undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
    }
    return url;
}
//清空图片
function resetImage() {
    imgSrc = [];  //存放图片路径
    imgFile = []; //存放文件流
    imgName = []; //存放图片名字
}

/*
三个参数
file：一个是文件(类型是图片格式)，
w：一个是文件压缩的后宽度，宽度越小，字节越小
objDiv：一个是容器或者回调函数
photoCompress()
 */
function photoCompress(file,w,objDiv){
    var ready=new FileReader();
    /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
    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);
    }
}
/**
 * 将以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});
}

前端调用

uploadUnitInfo(6, '/gz/unit/save', JSON.stringify(vm.unit));

后台接收

	@RequestMapping("/save")
	@RequiresPermissions("gz:unit:save")
	public R save(MultipartFile file[], @RequestParam(value = "params") String params){
		//业务处理逻辑
	}