js点击出现弹窗实现上传

以下是单个文件上传

 $('.bzxcgModal').on('click', function() {
                let html = `
                    <form class="layui-form" style="padding:10px 10px 10px 10px" action="">
                        <div>
                                <ul class="bzxcgUl">
                                    <li>
                                        <p>数量：</p>
                                        <input type="text" class="cgsl_tc" />
                                    </li>
                                    <li>
                                        <p>名称：</p>
                                        <input type="text" class="cgmc_tc" />
                                    </li>
                                    <li>
                                        <p>等级：</p>
                                        <input type="text" class="cgdj_tc" />
                                    </li>
                                    <li>
                                        <p>文件号：</p>
                                        <input type="text" class="cgwjh_tc" />
                                    </li>
                                </ul>
                        </div>
                        <div style="margin-top: 10px;">
                            <span class="rwElements" style="margin-left: 5px;width:80%">
                                <input style="background:#fff;border:0 solid #000" id="importf" type="file" />
                            </span>
                        </div>
                        <div style="width:100%;margin-button-bottom:45px">
                            <span style="display:block;text-align:center">
                                <button data-id='${$(this).attr('data-id')}' type="button"  id="btn_bmit3" class="smallBtn blueColor" style="margin-top:20px;margin-bottom:-63px !important">提交</button>
                            </span>
                        </div>
                    </form>
                     `
                let index3 = layer.open({
                    title: '标志性成果上传',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['500px', '500px'], //宽高
                    content: html
                });
                $('#btn_bmit3').on('click', function() {
                    if ($('#importf')[0].files.length > 0) {
                        shangchuan($('#importf')[0])
                    } else {
                        alert('请选择一个文件')
                    }
                })

                function shangchuan(data) {
                    if (!data.files) {
                        return;
                    }
                    var f = data.files[0];
                    var formData = new FormData()
                    formData.append('upfile', f) //文件
                    formData.append('level', $('.cgdj_tc').val()) //等级
                    formData.append('cgname', $('.cgmc_tc').val()) //名称
                    formData.append('cgFileNum', $('.cgwjh_tc').val()) //文件编号
                    formData.append('cgNum', $('.cgsl_tc').val()) //	数量
                    $.ajax({
                        type: 'post',
                        url: '接口',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(res) {
                            if (res.msg == '成功') {
                                alert('上传成功')
                                layer.close(index3)
                            }
                        }
                    })
                }
            })

以下是多个文件上传

$('.bzxcgModal').on('click', function() {
                let html = `
                    <form class="layui-form" style="padding:10px 10px 10px 10px" action="">
                        <div>
                                <ul class="bzxcgUl">
                                    <li>
                                        <p>数量：</p>
                                        <input type="text" class="cgsl_tc" />
                                    </li>
                                    <li>
                                        <p>名称：</p>
                                        <input type="text" class="cgmc_tc" />
                                    </li>
                                    <li>
                                        <p>等级：</p>
                                        <input type="text" class="cgdj_tc" />
                                    </li>
                                    <li>
                                        <p>文件号：</p>
                                        <input type="text" class="cgwjh_tc" />
                                    </li>
                                </ul>
                        </div>
                        <div class='pblock pTen'>
                                <div class='eachDiv' style="padding-left: 0em;padding-right: 0; width:100%">
                                    <span class='inputSpan'>
                                        <label for="uploadfile" class='' style="margin-left: 28px;
margin-right: -26px;">附件</label>
                                        <input type="text" style='display:none' id='hideuploadfilePath1'>
                                        <a href="javascript:;" class="file__a">
                                            <button type="button" class="layui-btn" id="layuifile1"
                                                style='background-color:#3e75ff'>上传</button>

                                            <input id="mulitiAllfilebl1" type="file" name="uploadcgfile"
                                                multiple="multiple" />
                                        </a>
                                        <ul class='fileNameUl_allbl1'>

                                        </ul>
                                    </span>
                                </div>
                            </div>
                        <div style="width:100%;margin-button-bottom:45px">
                            <span style="display:block;text-align:center">
                                <button data-id='${$(this).attr('data-id')}' type="button"  id="btn_bmit3" class="smallBtn blueColor" style="margin-top:20px;margin-bottom:-63px !important">提交</button>
                            </span>
                        </div>
                    </form>
                     `
                let index3 = layer.open({
                    title: '上传',
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['500px', '500px'], //宽高
                    content: html
                });
                let bzxcgList = []  //选择文件后存入数组中，下面的操作可以删除已经选中的文件具体可以运行查看
                $('#mulitiAllfilebl1').off('change').on('change', function(e) {
                    let allFiles = $(' #mulitiAllfilebl1')[0].files;
                    let fileLi = '';
                    for (let i = 0; i < allFiles.length; i++) {
                        bzxcgList.push(allFiles[i]);
                        let thisFileName = allFiles[i].name
                        let temp = `<li class='eachFileName'><p class="fileNameClick">${thisFileName}<span><i style='display:none'>${i}</i><span class='downloaddelete1'><span class='downloadclick forbiddendownload'>下载</span><span class='deleteclick'>删除</span></span></p></li>`;
                        fileLi += temp;
                    }
                    $(' .fileNameUl_allbl1').append(fileLi);
                });
                $('.fileNameUl_allbl1').off('click').on('click', '.eachFileName', function(e) {
                    e.stopPropagation();
                    let $that = $(this);
                    $(this).find('.downloaddelete1').show();
                    if ($(e.target).hasClass('downloadclick')) {
                        //下载当前文件
                        $that.find('.downloaddelete1').hide();
                    } else if ($(e.target).hasClass('deleteclick')) {
                        //删除当前文件
                        let delIndex = $(this).find('i').text();
                        bzxcgList.splice(delIndex, 1);
                        if (!bzxcgList.length) {
                            $(' #mulitiAllfilebl1').val('')
                        }
                        $(this).remove();
                        $that.find('.downloaddelete1').hide();
                    }
                });
                $('#btn_bmit3').on('click', function() {
                    if (bzxcgList.length > 0) {
                        shangchuan()
                    } else {
                        alert('请选择一个文件')
                    }
                })

                function shangchuan() {
                    var formData = new FormData()
                    bzxcgList.forEach(function(file) {
                        formData.append('upfile', file);
                    })
                    formData.append('level', $('.cgdj_tc').val()) //等级
                    formData.append('cgname', $('.cgmc_tc').val()) //名称
                    formData.append('cgFileNum', $('.cgwjh_tc').val()) //文件编号
                    formData.append('cgNum', $('.cgsl_tc').val()) //	数量
                    formData.append('taskID', sessionStorage.getItem('bjid')) //	id
                    $.ajax({
                        type: 'post',
                        url: '接口',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(res) {
                            if (res.msg == '成功') {
                                alert('上传成功')
                                layer.close(index3)
                                bzxcgAjax()
                            }
                        }
                    })
                }
            })

点击按钮弹出弹窗实现上传功能