SpringBoot图片上传(四) 一个input上传N张图，支持各种类型

简单介绍：需求上让实现，图片上传，并且可以一次上传9张图，图片格式还有要求，网上找了一个测试了下，好用，不过也得改，仅仅是实现了功能，其他不尽合理的地方，还需自己打磨。

代码：

//html
<div class="col-md-12">
    <label class="control-label flex" style="margin-top: 10px;">
        上传附件<span class="star align-items">*</span>
    </label>
    <div class="">
        <img th:src="@{/assets-new/apps/img/shangchuan.png}" id="imgIcon"
             width="35px" height="35px"/>
        <input type="file" id="seledIcon" style="display:none"
               multiple="multiple" accept="image/gif,image/jpg,image/png,image/JPEG"/>
    </div>
    <input type="hidden" name="contractIcon"  id="contractIcon"/>
</div>
<div id="imgBox"></div>
<button id="btn">上传</button> 
//说明一下，accept可以直接设置"image/*"是所有类型的图片格式 输入accept= idea会给出提示的，可以自己看看

//js代码 

$("#imgIcon").on("click", function () {
    $("#seledIcon").trigger("click");
});

//这段代码建议放到初始化里边 另外 url要加上 根路径 rootPath，否则上传不了不怪我哦
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
    <![CDATA[
       imgUpload({
           inputId:'seledIcon', //input框id
           imgBox:'imgBox', //图片容器id
           buttonId:'btn', //提交按钮id
           upUrl: rootPath +'/oper/contract/uploadImg',  //提交地址
           data:'file', //参数名
           num:"9"//最多上传图片个数，可以设置很多，看你服务器大小以及性能了
       });
    ]]>
</script> 

//js代码
var imgSrc = [];  //存放图片路径
var imgFile = []; //存放文件流
var imgName = []; //存放图片名字
//选择图片的操作
function imgUpload(obj) {
    debugger;
    var oInput = '#' + obj.inputId;
    var imgBox = '#' + obj.imgBox;
    var btn = '#' + obj.buttonId;
    //用on是因为它可以动态的绑定事件
    $(oInput).on("change", function() {
        //获取type=file的input
        var fileImg = $(oInput)[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);
            //在文件流数组的末尾添加文件
            imgFile.push(fileList[i]);
        }
        //将图片展示出去
        addNewContent(imgBox);
    });

    $(btn).on('click', function() {
        if(!limitNum(obj.num)){
            layer.msg("最多只能上传"+obj.num+"张照片!");
            return false;
        }

        //用FormData对象上传
        var fd = new FormData($('#addForm')[0]);
        //由于fd对象中已经包含<input type='file'>的input标签，如果不删除，就会造成重复上传
        fd.delete("file");
        //将文件流循环添加到FormData对象中
        for(var i=0;i<imgFile.length;i++){
            fd.append(obj.data,imgFile[i]);
        }
        //上传所有的图片
        submitPicture(obj.upUrl, fd);
    })
}
//图片展示
function addNewContent(obj) {
    $(imgBox).html("");
    for(var a = 0; a < imgSrc.length; a++) {
        var oldBox = $(obj).html();
        $(obj).html(oldBox + '<div class="imgContainer"><img title=' + imgName[a] + ' alt=' + imgName[a] + ' src=' + imgSrc[a] + ' onclick="imgDisplay(this)"><p onclick="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;
    }
}

//上传(将文件流数组传到后台)
function submitPicture(url,data) {
    debugger;
    for (var p of data) {
        console.log(p);
    }
    if(url&&data){
        $.ajax({
            url: url,
            type: "post",
            data: data,
            async: true,
            //下面这两个要写成false，要不然上传不了。
            processData: false,
            contentType: false,
            success: function(dat) {
                debugger;
                layer.msg("上传成功");
            },
            error:function(xhr,emsg,e) {
                //打印ajax发生的错误
                console.log(e);
                //答应出ajax请求返回的文本信息
                console.log(xhr.responseText());
            }
        });
    }else{
        layer.msg('数据格式不正确!');
    }
}
//当鼠标移到图片上时，显示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;" onclick="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;
} 

 总结：好用是好用，但是对于图片大小样式什么的没有具体的限定，另外展示图片仅仅是吧图片放在了html中，体验感不太好，嗯，反正得改。。。。

原文链接：https://blog.csdn.net/jtshongke/article/details/78516559