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

最新推荐文章于 2023-07-06 15:17:10 发布

在路上liu

最新推荐文章于 2023-07-06 15:17:10 发布

阅读量1k

点赞数

分类专栏： Html&Js 文章标签： ajax上传文件进度条

本文链接：https://blog.csdn.net/liuchang19950703/article/details/98961792

版权

Html&Js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Html代码：

<input id="inputFile" name="inputFile" type="file" />


<div class="progressDiv">
 <div class="progress">
 </div>
 </div>

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");
               
            }
        })

效果：