js implements clicking the button to select files, upload files, and get progress

The UI framework layui and jquery realize clicking the button to select the file, upload the file, and get the progress bar 

html pseudocode:

<style>
.myProgress {
    width: 100%;
    background-color: #e2e2e2;
    border-radius: 20px;
}
.myBar {
    width: 0;
    height: 18px;
    line-height: 18px;
    background-color: #5FB878;
    text-align: center;
    color: #fff;
    border-radius: 20px;
}
</style>    

<button id="btnWebUpload" type="button" class="layui-btn mtb10" onclick="openWebUploadModal()">上传文件</button>


<form class="layui-form layui-form-pane m20 dev-update-modal" id="webUploadModal">
    <div class="layui-form-item">
        <div class="layui-upload">
            <button type="button" class="layui-btn" onclick="chooseWebFileClick()">选择文件</button>
            <input type="file" id="chooseWebFile" class="hide" accept=".html" onchange="chooseWebFileChange()">
            <span id="webFileName"></span>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="myProgress">
            <div id="webFileBar" class="myBar">0%</div>
        </div>
    </div>
    <div class="update-btn">
        <button type="button" class="layui-btn layui-btn-normal layui-btn-disabled" id="webUploadStart" disabled onclick="webFileUploadStart()">开始</button>
    </div>
</form>

//打开上传弹框
function openWebUploadModal() {
    layer.open({
        type: 1,
        title: "上传文件",
        skin: 'layui-layer-rim', //加上边框
        area: ['600px', '400px'], //宽高
        resize: false,
        content: $("#webUploadModal"), //打开上传面板
        success: function() {
            $("#webFileBar").css("width", 0 + "%").text(0 + '%');
        },
        cancel: function() {
            clearInterval(webFileUploadTimer);
        }
    })
}

let webFilePath;//选择文件路径
let lastwebFilePath;//上次选择路径
let webFileUploadTimer = null;
function chooseWebFileClick() { //选择文件按钮点击
    webFilePath = '';
    $("#chooseWebFile").val("");
    $("#chooseWebFile").click();
}

function chooseWebFileChange(e) { //获取文件信息
    e = e ||event;
    let resultFile = document.getElementById('chooseWebFile').files[0];
    webFilePath = resultFile.path;
    lastwebFilePath = webFilePath;
    let reader = new FileReader()
    reader.readAsDataURL(resultFile);
    $("#webFileName").text(resultFile.name);
    reader.onload = function (e) {
        let result = e.target.result;
        var code = result.split("base64,");
        $("#webUploadStart").removeAttr("disabled").removeClass("layui-btn-disabled");
    }
}

//开始升级
function webFileUploadStart() { 
    console.log("webFilePath-- " + webFilePath);
    // if(webFilePath == "" || webFilePath == null || webFilePath == undefined) return;
    if(webFilePath == "" || webFilePath == undefined) {
        if($("#webFileName").text() != "" && lastwebFilePath != ""){
            webFilePath = lastwebFilePath;
            console.log("选择文件弹框点击关闭或取消时 path取上一次选中 == " + filePath);
        } else {
            return;
        }
    }

    $("#webUploadStart").attr("disabled", "disabled").addClass("layui-btn-disabled");
    // 这写发送上传接口 webFilePath为选择的路径  发送和获取进度以实际接口为准，我这里是分了2条
    webFileUploadTimer = setInterval(function () {
        let data = uploadProgress;//这改为发接口 获取上传进度
        let progress = data.progress.toFixed(2);
        let status = data.status;
        $("#webFileBar").css("width", progress + "%").text(progress + '%');
        if (status != 0 && status != 1) {
            clearInterval(webFileUploadTimer);
            $("#webUploadStart").removeAttr("disabled").removeClass("layui-btn-disabled");
        }
    }, 500);
}

 preview: