jsjq、ajax、java实现多文件上传与列表显示

效果图：

        

实现Form表单添加数据、上传文件。

数据表与文件表通过文件表id关联。

前端代码：

JS：

<script type="text/javascript">

//生成UUID
    function UUID() {
        var s = [];
        var hexDigits = "0123456789abcdef";
        for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[8] = s[13] = s[18] = s[23] = "-";
        var uuid = s.join("");
        return uuid;
    }

    //点击上传文件按钮触发隐藏的文件上传input
    function butfile() {
        $("#inputLIMSFile").click();

    }
    //选择文件后、获取多选文件信息、循环得到每一条文件、在得到每个文件的属性拼成tr存放到table内显示。
    function inputfile(value) {
        var uuid = UUID();
        console.log("inputLIMSFile.files", $("#inputLIMSFile")[0].files)

        //获取上传文件数组
        var filesList = inputLIMSFile.files;
        var tr = "";
        for (var i = 0; i < filesList.length; i++) {

            //使用URL.createObjectURL()可以在线打开文件;
            let fileHref = URL.createObjectURL(filesList[i]);

            //获取文件信息动态在table内显示  动态参数拼接 '+参数+'  设置每个tr标识' + i +uuid+ '用于操作tr数据
            tr += '<tr id=tr' + i + uuid + '><td><a href=' + fileHref + '  target="_blank"  >' + filesList[i].name + '</a></td><td>' + (filesList[i].size / 1014).toFixed(1) + 'kb</td><td>等待上传</td><td><button οnclick="deleteFile(' + "'tr" + i + uuid + "'" + ' )" type="button" class="btn btn-danger">删除</button></td></tr>'
        }

        //获取table Id添加tr
        $("#filetbody").append(tr);

        //循环所选文件、通过ajax逐条上传到服务器与数据库
        for (var i = 0; i < filesList.length; i++) {

            //将文件信息存到fileData中、后端通过MultipartHttpServletRequest接收
            var fileData = new FormData();
            fileData.append('fileData', filesList[i]);
            $.ajax({
                url : "${ctx}/limsfilemanagement/limsFileManagement/uploadFiles?fileTypeupdateId=" + $("#fileTypeupdateId").val(), //请求地址
                dataType : "text", //返回数据格式
                //async : true, //是不是异步请求 默认异步
                async : false, //是不是异步请求 默认异步
                data : fileData, //参数传递
                cache : false,
                contentType : false, // 告诉jQuery不要去设置Content-Type请求头
                processData : false, // 告诉jQuery不要去处理发送的数据
                type : "post", //请求方式
                success : function(fanhui) {

                    console.log("fanhui", fanhui);
                    console.log("i", i);

                    var trid = "tr" + i + uuid;

                    //  请求成功时的操作、将等待的状态改为上传成功
                    $("tr[id=" + trid + "]").children("td").eq(2).html("上传成功");

                    //将后端存入数据库的id绑定在tr  name属性中、删除时操作数据库用的id
                    $("tr[id=" + trid + "]").attr("name", fanhui);
                },
                error : function() {
                    console.log("错");
                //请求出错处理
                }
            })

        }

    }

    function deleteFile(i) {

        //获取要删除的文件id
        var deleteId = $("tr[id=" + i + "]").attr("name");

        $.ajax({
            url : "${ctx}/limsfilemanagement/limsFileManagement/deleteFile?deleteId=" + $("tr[id=" + i + "]").attr("name"), //请求地址
            dataType : "text", //返回数据格式
            //async : true, //是不是异步请求 默认异步
            async : false, //是不是异步请求 默认异步
            //data : , //参数传递
            cache : false,
            contentType : false, // 告诉jQuery不要去设置Content-Type请求头
            processData : false, // 告诉jQuery不要去处理发送的数据
            type : "post", //请求方式
            success : function(fanhui) {
                //  请求成功时删除tr
                $("tr[id=" + i + "]").remove();
            },
            error : function() {
                console.log("错");
            //请求出错处理
            }
        })

    }

    //返回不保存时删除异步上传的文件
    function fanhui() {
        //获取所有table中的文件数据库id、组成数组传给后端删除方法
        var fanhuiDeleteFileId = [];
        if ($("#filetbody tr").length != 0) {
            var tr = $("#filetbody tr").each(function(i) {
                fanhuiDeleteFileId