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

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

html伪代码：

    

上传文件



    

        

            选择文件
            
            
        
    
    

        

            
0%
        
    
    

        开始
    

//打开上传弹框
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);
}

 预览图：