上传多个商品规格（动态生成表格内容）

类似商品规格的上传都可以使用
这是动态生成表格里的内容

<div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>商品规格：</label>
            <table class="layui-table text-c" id="table" style="width: 80%;">
                <thead>
                <tr class="text-c">
                    <td style="width:50px">序号</td>
                    <td style="width:130px">规格名称</td>
                    <td style="width:70px">价格</td>
                    <td style="width:70px">库存</td>
                    <td style="width:130px">原始编码</td>
                    <td style="width:130px">图片</td>
                    <td style="width:50px">操作</td>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
            <a title="添加规格" href="javascript:;"
               th:onclick="'javascript:add()'"
               class="ml-5" style="text-decoration:none;margin-left: 145px;"><i class="Hui-iconfont">&#xe604;</i></a>
        </div>

js如下：

<!--回显本地图片-->
<script>
    function changImg(data){
        var file = data.files.item(0);
        //实例化FileReader API
        var id=$(data).attr('id');
        var freader = new FileReader();
        freader.readAsDataURL(file);
        freader.onload = function(e) {
            $("#a"+id).css("display","none");
            $("#myImg"+id).css("display","block");
            $("#myImg"+id).attr("src",e.target.result);
        }
    }
</script>
<!--去除input框里相同的值，因为我这里业务要求的是规格原始编码必须唯一，所以做了这个判断-->
<script>
    function checkName(data){
        //校验联系信息不能一致
        var values="";
        $(".input-text.t").each(function(i,item){
            var value=$(this).val();
            values+=value; //获取所有的名称
        });
        var val=$(data).val(); //获得当前输入框的值
        var newValue=values.replace(val,""); //去除当前输入框的值
        if(newValue==""){
            return false;
        }else{
            if(newValue.indexOf(val)>-1){  //当前值和newValue作比较
                layer.designMsg('原始编码重复!');
                $(data).val("");
                $(data).focus();
            }
        }
    }
</script>
<!--商品规格-->
<script>
    var table = document.getElementById("table") ;
    //表格行数
    var index = table.rows.length-1 ;
    if(index>=1){
        $("#goodsPrice").hide();
        $("#goodsNum").hide();
        $("#goodsOriginalBarcode").hide();
    }
    function add(){
        var tab = document.getElementById("table") ;
        //表格行数
        var row = tab.rows.length-1 ;
        row++;
        index++;
        if(row==1){
            $("#goodsPrice").hide();
            $("#goodsNum").hide();
            $("#goodsOriginalBarcode").hide();
        }
        var $li = $(
            "<tr class=\"text-c\" id="+index+" style=\"background: #fff;\"><td>"+row+"</td><td><input class=\"input-text\" style='border: none;outline: none;' type='text' name='stardardName' required></td>"+
            "<td><input class=\"input-text\" type='text' name='stardardPrices' style='border: none;outline: none;' required></td>"+
            "<td><input class=\"input-text\" type='text' name='stardardNums' style='border: none;outline: none;' required></td>"+
            "<td><input class=\"input-text t\" type='text' name='originalBarcodes' style='border: none;outline: none;' οnchange=\"checkName(this);\"></td>"+
            "<td align=\"center\"><a href=\"javascript:void();\" id='afile"+index+"' class=\"btn btn-primary upload-btn\"><i class=\"Hui-iconfont\"></i> 浏览图片</a>"+
            "<input type=\"file\" name=\"file\" id='file"+index+"' accept=\"image/*\" class='input-file valid' style='height:100%;width: 100%;' οnchange=\"changImg(this);\" required>" +
            "<img alt=\"暂无图片\" id='myImgfile"+index+"' src=\"\" height=\"50px\",width=\"50px\" style='display: none'></td>" +
            "<td><span style='cursor: pointer;' id='span"+index+"' οnclick='sub("+index+")'><i class=\"Hui-iconfont\">&#xe60b;</i></span></td></tr>"
        );
        $("#tbody1").append($li);
    }
    function sub(id){
        var tab = document.getElementById("table") ;
        //表格行数
        var row = tab.rows.length-1 ;
        $("#"+id).remove();
        row--;
        if(row==0){
            $("#goodsPrice").show();
            $("#goodsNum").show();
            $("#goodsOriginalBarcode").show();
        }
        var row1 = tab.rows.length-1 ;
        for(var i=1;i<=row1;i++){
            tab.rows[i].cells[0].innerHTML=i;
        }
    }
</script>

后台的图片接的时候使用@PathParam("file") MultipartFile[] file类型去接数据，就可以接到name="file"的input框里的内容了