js 实现点击按钮选择文件，上传文件，获取进度

UI框架 layui 、jquery 实现点击按钮选择文件，上传文件，获取进度条 

html伪代码：

<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);
}

 预览图：