真实的上传进度条

点击选择文件，选择了文件后即上传，上传完成后点击保存，保存成功后模态框自动关闭。

前端代码：

<div class='form-group'>
    <label class='col-sm-2 control-label'>上传图像：</label>
    <div class='col-sm-10'>
        <input type="file" class="newFile"/>
        <input type="hidden" name="newFileMsg" data-name=""/>
    </div>
</div>
<div class='form-group' style="display: none;" id="myModal_add_progressBar_Module">
    <label class='col-sm-2 control-label'>上传进度：</label>
    <div class='col-sm-10'>
        <div class="progress">
            <div class="progress-bar" id="myModal_add_progressBar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" style="width:0;" >
            </div>
        </div>
        <span id="percentage"></span><span id="time"></span>
    </div>
</div>

js代码：

//图片上传
$(".newFile").on('change', function(e){
    var fileObj = e.currentTarget.files[0]; // js 获取文件对象
    var name = e.currentTarget.files[0].name;
    $(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").attr("data-name",name);
    var url="/tbQuestion/uploadImg";

    var form = new FormData(); // FormData 对象
    form.append("file", fileObj); // 文件对象

    var xhr;
    xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
    xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
    xhr.onload = uploadComplete; //请求完成
    xhr.onerror =  uploadFailed; //请求失败

    xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】
    xhr.upload.onloadstart = function(){//上传开始执行方法
        ot = new Date().getTime();   //设置上传开始时间
        oloaded = 0;//设置上传开始时，以上传的文件大小为0
    };
    xhr.send(form); //开始上传，发送form数据

    //显示进度条
    $("#myModal_add_progressBar_Module").css("display","block");
});

//上传成功响应
function uploadComplete(evt){
    //服务断接收完文件返回的结果
    //console.log(evt);
    var imgUrl = JSON.parse(evt.target.responseText);
    $(".newFile").parents("div.col-sm-10").find("input[name='newFileMsg']").val(imgUrl);
}
//上传失败
function uploadFailed(evt){
    parent.layer.msg("上传失败");
}
//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction(evt){
    // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
    if (evt.lengthComputable){
        $("#myModal_add_progressBar").css("width",Math.round(evt.loaded / evt.total * 100) + "%");
        $("#myModal_add_progressBar").html(Math.round(evt.loaded / evt.total * 100) + "%");
        $("#percentage").html("已上传"+Math.round(evt.loaded / evt.total * 100) + "%");
    }
    var nt = new Date().getTime();//获取当前时间
    var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
    ot = new Date().getTime(); //重新赋值时间，用于下次计算
    var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
    oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
    //上传速度计算
    var speed = perload/pertime;//单位b/s
    var bspeed = speed;
    var units = 'b/s';//单位名称
    if(speed/1024>1){
        speed = speed/1024;
        units = 'k/s';
    }
    if(speed/1024>1){
        speed = speed/1024;
        units = 'M/s';
    }
    speed = speed.toFixed(1);
    //剩余时间
    var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);
    $("#time").html('，速度：'+speed+units+'，剩余时间：'+resttime+'s');
}

批量导入压缩文件或单一文件的差异：

点击选择文件，选择了文件后，需点击保存后才上传，上传完成后模态框自动关闭。

当导入大文件交给后台处理时，文件上传完成，进度条到100%，但导入整个过程并没有结束，即模态框不会马上关闭。

前端代码：

<div class='form-group'>
    <label class='col-sm-2 control-label'>选择文件</label>
    <div class='col-sm-10'>
        <input type="file" name="file" id="bulkImport"/>
    </div>
</div>
<div class='form-group' id="fileSizeModule" style="display: none;">
    <label class='col-sm-2 control-label'>文件大小</label>
    <div class='col-sm-10'>
        <input type="text" class="form-control" name="fileSize"/>
    </div>
</div>
<div class='form-group' style="display: none;" id="progressModule">
    <label class='col-sm-2 control-label'>上传进度</label>
    <div class='col-sm-10'>
        <div class="progress">
            <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0"></div>
        </div>
    </div>
</div>

js代码：

//用户点击批量导入 重置批量导入模态框
$("#clickBulkImport").click(function(){
    $("#fileSizeModule").css("display","none");
    $("#progressModule").css("display","none");
    $("#bulkImport").val("");
    $("#fileSizeModule").find("input[name='fileSize']").val("");
    $("#progressBar").attr("aria-valuemax","100");//kb
    $("#progressBar").attr("aria-valuenow","0");
    $("#progressBar").css("width","0");
});

//用户选择了上传文件
$("#bulkImport").on('change', function( e ){
    $("#fileSizeModule").css("display","block");
    var fileSize = e.currentTarget.files[0].size;
    var totalNum=Math.round(Number(fileSize)/1024);
    $("#myModal_import").find("form input[name='fileSize']").val("大约"+totalNum+"KB");
});

//批量导入 保存
$("#myModal_import").on("click",".saveBtn",function(){
    var fileObj = document.getElementById("bulkImport").files[0]; // js 获取文件对象
    var name = fileObj.name;
    var url="/batchImportEastQuest/import";

    var form = new FormData(); // FormData 对象
    form.append("file", fileObj); // 文件对象

    var xhr;
    xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
    xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
    xhr.onload = uploadComplete2; //请求完成
    xhr.onerror =  uploadFailed2; //请求失败

    xhr.upload.onprogress = progressFunction2;//【上传进度调用方法实现】
    xhr.upload.onloadstart = function(){//上传开始执行方法
        ot = new Date().getTime();   //设置上传开始时间
        oloaded = 0;//设置上传开始时，以上传的文件大小为0
    };
    xhr.send(form); //开始上传，发送form数据

    //显示进度条
    $("#progressModule").css("display","block");
});

//上传成功响应
function uploadComplete2(evt){
    //服务断接收完文件返回的结果
    //console.log(evt);
    parent.layer.msg('批量导入成功！', {icon: 1});
    $("#progressModule").css("display","none");//隐藏进度条
    //关闭模态框
    $("#myModal_import").find(".modal-header .sr-only").click();
    var pageNum=$("b.presentPage").html();
    goPage(pageNum);
}
//上传失败
function uploadFailed2(evt){
    parent.layer.msg("导入失败");
}
//上传进度实现方法，上传过程中会频繁调用该方法
function progressFunction2(evt){
    // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
    if (evt.lengthComputable){
        $("#progressBar").css("width",Math.round(evt.loaded / evt.total * 100) + "%");
        $("#progressBar").html(Math.round(evt.loaded / evt.total * 100) + "%");
    }
    var nt = new Date().getTime();//获取当前时间
    var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差，单位为s
    ot = new Date().getTime(); //重新赋值时间，用于下次计算
    var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
    oloaded = evt.loaded;//重新赋值已上传文件大小，用以下次计算
}

代码参考了：https://www.cnblogs.com/007sx/p/7520529.html