前端显示文件上传进度以及上传100%卡顿结局方法

上传进度显示

		//上传进度显示块
        <div id="percentLoad" hidden>
            <div id="percentbgc"></div>
            <div id="percentNum"><span>100</span>%</div>
        </div>
			//上传文件
            $.ajax({
                url: fileupurl,
                type: 'POST',
                data: filesData,
                processData: false, // ⑧告诉jQuery不要去处理发送的数据
                contentType: false, // ⑨告诉jQuery不要去设置Content-Type请求头
                beforeSend: function () {
                    //⑩发送之前的动作
                },
                xhr: function () {
                    var xhr = $.ajaxSettings.xhr();
                    if (onprogress && xhr.upload) {
                        xhr.upload.addEventListener("progress", onprogress, false);
                        return xhr;
                    }
                },
                success: function (data) {
                    $("#upload_btn").val("")
                    var arr = JSON.parse(data)
                    console.log(arr);

                    var FileName = arr.fileName
                    var FileUrl = arr.previewSrc
                    saveFuJian(arr.Info, FileName, FileUrl, IsDefault, licenceID)
                    $("#percentNum span").html(100);
                    $("#percentbgc").css("width", "100%");
                },
            });

    // 百分比样式
    function onprogress(evt) {
        var loaded = evt.loaded; //已经上传大小情况
        var tot = evt.total + 1; //附件总大小  
        var per = Math.floor(100 * loaded / tot); //已经上传的百分比
        $("#percentNum span").html(per);
        $("#percentbgc").css("width", per + "%");
    }

关于上传100%卡顿
原因，前端文件上传后后台数据库还要进行保存这段进度是检测不到的除非后台继续返回数据，当不想这么麻烦时我肯可以在前端显示百分比数据时最大可显示99% 等后端保存完毕后我们再改成100%

在onprogress方法里面给总附件大小+1这样前端上传完成后会显示99%
后台数据库保存完毕后返回成功后再改成100%