js文件上传添加进度条

最新推荐文章于 2024-07-24 11:09:48 发布

跟着光走，，

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量969

点赞数

文章标签： javascript 前端 ajax

本文链接：https://blog.csdn.net/qq_43379523/article/details/126693425

版权

<div id = "progress_1"  class="systemUpdates_box dialogArea" style="display:none;">
             <div class="progressBar_box " id="progressBar">
                 <div class="barContent_box" id="barContent"></div>
             </div>
              <div class="bottomDisplay_box">
                <p class="operationTips" style="margin-top: 1em;color: #ff6600;margin:0 auto;width: 40%;" id="operationTips3">提示语</p>
                 <div class="progress_box">
                     <label id="progressShow">0%</label>
                 </div>
             </div> 
         </div>

.systemUpdates_box {
    width:780px;
    height:200px;
    background:#eeeeee;
    padding-top:55px;
    padding-left:50px;
}
.newSystem_box {
    color:#5e5454;
    font-size:28px;
    font-weight:bold;
}
.tips_box {
    font-size:8px;
}
.progressBar_box {
    margin-top:30px;
    width:720px;
    height:8px;
    background:#ffffff;
    border-radius:5px;
}
.barContent_box {
    height: 8px;
    background: #f96600;
    border-radius: 5px;
}
.bottomDisplay_box {
    width: 720px;
    height: 100px;
    margin-top: 18px;
}
.cancelButton_box {
    width: 110px;
    height: 40px;
    background: #ffffff;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    outline: none;
}
.cancelButton_box:hover {
        color: white;
        background: #343238;
    }
.progress_box {
    width:20px;
    margin: 5px auto;
    font-size:large;
}

function progressBar(evt) {
    var loaded = evt.loaded; //已经上传大小情况
    var tot = evt.total; //附件总大小
    var per = Math.floor(100 * loaded / tot); //已经上传的百分比
    console.log(per);
    $("#progress_1").show();  //显示进度条
    testBegin(per);           //显示百分比
}

function setAjaxJsonDataupdata(urlstr, reqJson, callback, options) {
    
    $.ajax({
        url: urlstr,
        async: true,
        // timeout: 6000,
        cache: false,
        type: "POST",
        //dataType: "json",
        data: reqJson,
        contentType: "application/octet-stream",
        processData: false,
        error: function(xhr, textStatus) {
            var errorInfo = textStatus + ": " + xhr.status + " " + xhr.readyState;
            console.log(errorInfo);
        },
        xhr: function() { //ajax进度条
            var xhr = $.ajaxSettings.xhr();
            if(xhr.onprogress){
                xhr.onprogress = progressBar;
            }
            else if (xhr.upload) {
                xhr.upload.addEventListener("progress", progressBar, false);
            }
            return xhr;
        },
       //  success: function(data){
       //      var obj = data2Object(data);
       //      if (typeof callback === "function"){
       //          callback(obj);
       //      }
       //  }
        success: function(data){    
            callback(data);
        }
    });

function testBegin(val) {
    var progressBar = document.getElementById("progressBar");
    var barContent = document.getElementById("barContent");
    var label = document.getElementById("progressShow");
    barContent.style.width = progressBar.offsetWidth * (val / 100) + "px";
    label.innerText = ((val) + "%");

} 

setAjaxJsonDataupdata("action/uploadfile", name, function(obj){
            $("#progress_1").hide();
            upgradeStep = 3;
            setFirmwareStep(upgradeStep);
            console.log("set_wifi_param success!!!");
            console.log(obj);
        }, {
            async: false
        });