layui 彈窗實現文件上傳

html界面(主界面隱藏，彈窗中顯示)

<div id="file_upload_div" style="display: none" class="text-center">
    <div class="layui-upload-drag" id="test10">
        <i class="layui-icon"></i>
        <p>點擊上傳，或將文件拖拽到此處</p>
    </div>
    <div class="mt-2 mb-2" id="file_name"></div>
    <div class="layui-input-inline " style="width: 100%;">
        <div class="layui-input-inline">
            <label for="type" class="layui-form-label" style="width: 100px">實驗類型: </label></div>
        <select id="type" class="layui-select">
            <option selected value="1">物理實驗</option>
            <option value="2">化學實驗</option>
            <option value="3">基電實驗</option>
            <option value="4">電子技術實驗</option>
            <option value="5">其他實驗</option>
        </select>
    </div>
    <div class="row w-100"></div>
    <button type="button" class="layui-btn mt-2" id="upload">開始上傳</button>
</div>

彈窗的js

    function uploadFile() {
        layui.use('layer', function () {
            var layer = layui.layer;

            layer.open({
                type: 1,
                area: ["500px", "360px"],
                title: "上傳文件",
                content: $("#file_upload_div")
            })
        });

    }

文件上傳的js

    layui.use('upload', function () {
        var upload = layui.upload;
        let cookies = document.cookie.split(',');
        let pattern = /csrftoken=(.*)/m;
        let csrf;
        for (let j = 0; j < cookies.length; j++) {
            if (pattern.test(cookies[j])) {
                csrf = pattern.exec(cookies[j])[1];
            }
        }
        //執行實例
        var uploadInst = upload.render({
            elem: '#test10' //綁定元素
            , headers: {
                "X-CSRFToken": csrf
            }
            , auto: false
            , bindAction: "#upload"
            , url: '{% url "course:upload" %}' //上傳接口
            , choose: function (obj) {
                obj.preview(function (index, file, result) {
                    document.getElementById("file_name").innerHTML = file.name;
                })
            }
            , done: function (res) {
                document.getElementsByClassName("layui-layer-close")[0].click()
                layer.msg("上傳成功")
            }
            , error: function () {
                layer.msg("上傳失敗，請重新上傳")
            }
        });
    });

效果

如果要和表單一塊上傳：uploadInst應該如下設置

 before:function () {
                this.data = {
                    test: $('input[name="test"]').val()
                }
            }

或者也可以直接設置 data屬性

data: {type:$('select[name="type"]').val() }