Ajax+Input的File控件上传时的超级简单实时进度条

深碍√TFBOYSˉ_ 2021-11-06 00:56 444阅读 0赞

**Html代码：**

**CSS代码：**

.progressDiv {
                width: 350px;
                height: 25px;
                /*border-style: solid;*/
                border: 1px solid #808080;
                border-radius: 5px;
                /*background-color: aqua;*/
            }
            .progress {
                width: 0px;
                height: 25px;
                background-color: deepskyblue;
            }

**Js代码**：

$.ajax({
                url: "",
                type: "Post",
                data: form,
                xhrFields: { withCredentials: true },
                crossDomain: true,
                async: true,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                xhr: function () {
                    var xhr = new XMLHttpRequest();
                    //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件
                    xhr.upload.addEventListener('progress', function (e) {
                        //loaded代表上传了多少
                        //total代表总数为多少
                        var progressRate = (e.loaded / e.total) * 100 + '%';
                        console.log(progressRate);
                        //通过设置进度条的宽度达到效果
                        $(".progress").css('width', progressRate);
                    })
                    return xhr;
                },
                success: function (data) {
                    //显示按钮
                    $("#save").prop("style", "display:normal");
                    
                },
                error: function (data) {
                    $(".progressDiv").addClass("progressDiv");
                   
                }
            })

**效果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWNoYW5nMTk5NTA3MDM_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWNoYW5nMTk5NTA3MDM_size_16_color_FFFFFF_t_70]: /images/20211104/dcc21e51038d421eae1326be180f6c95.png