多个表单form,提交上传文件 处理

类似于这样

我这里用的jquery+layui，vue等按照各自的语法都可以，我这里没有用form表单提交，用的自定义事件

HTML代码

<div class="layui-form-item layui-form-text">
                                <label class="layui-form-label"><font color="red">*</font>上传文件</label>
                                <div class="fileBtn">
                                    <input type="file" name="fileList" accept=".zip,.rar" lay-verify="required" class="uploadfile">
                                    <button type="button" class="btn btn-primary btn-sm btn-flie">上传附件</button>
                                </div>
                                <div class="rt">
                                    支持扩展名：.rar .zip
                                </div>
                            </div>
                            <div class="uploadList" data-fileId="">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                    <i class="layui-icon layui-icon-link"></i>
                                    <span class="fileName"></span>
                                </div>
                                <div class="layui-input-inline rt">
                                    <i class="layui-icon layui-icon-close delFile"></i>
                                </div>
                            </div>
                            <div class="loading">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                    <i class="layui-icon layui-icon-loading  layui-anim-rotate layui-anim-loop" style="display: inline-block;"></i>
                                    上传中...
                                </div>
                            </div>

JS 文件

// 在提交事件中
var files = $(".uploadfile"),data = [];
for (var i = 0; i < code.length; i++) {
           var fileInfo = {}
            if( files[i].files[0] == "" || typeof (files[i].files[0]) == "undefined") {
                return
            }
            fileInfo['file'] = files[i].files[0]
            data.push(fileInfo)
        }
        console.log(data)
        formdata.append("data", data);

 

上传文件中，删除文件后，上传同一文件，没反应，处理

把上传文件input 的value=null, 见下面代码

//删除文件
    $("#listBox").on("click", ".delFile", function () {
        var that = $(this);
        that.parent().parent().prev().find('.uploadfile').val(null);
        that.parent().parent().prev().find('.uploadfile')[0].files[0] = "";
        that.parent().parent().prev().find(".uploadfile").removeAttr('disabled');
    })