这是我参与8月更文挑战的第21天，活动详情查看：8月更文挑战

前言：

哈喽，小伙伴们大家好啊，今天来讲jQuery上传文件带进度条效果是如何实现的。

效果需求：

类型为file的input输入框，选择输入文件后，点击下方提交按钮，显示文件上传进度条，图片上传完成后显示这张传入后端的图片。

结构搭建：

<form>
        <input type="file" name="avatar"  class="fileIpt">
        <input type="text" placeholder="请选择文件" class="chanceFile">
        <input type="submit" value="提 交">
    </form>
    
    <!-- 进度条 -->
    <progress style="display: none;" max="100" value="5"></progress>
    
    <!-- 展示图片 -->
    <img width="500" id="pic" src="" alt="">

样式部分：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
            height: 100%;
            position: fixed;
            background-image: url(./sky.jpg);
        }
        form {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

        }
        .fileIpt{
            display: none;
        }
    </style>

技术介绍：

该实现方法使用的是jQuery，以及Ajax，FormData收集数据

引入jQuery

    <script src="jquery-1.12.4.js"></script>

定义jq对象，方便下面使用

var form = $("form");
var progress = $("progress");
var pic = $("#pic");
var chanceFile = $(".chanceFile");
var fileIpt = $(".fileIpt");

文本输入框点击触发文件输入框的点击事件：

chanceFile.on('click',function(){
    fileIpt.click(); 
})

提交 按钮的submit事件,各步骤分解如下：

form.on("submit", function (e) {
 e.preventDefault();
            // FormData收集数据
            var fd = new FormData(this);
            var files=fileIpt[0].files;
            console.log(files);
            chanceFile[0].value=fileIpt.val().split("\\")[2];
            
            // jQ的ajax方法
            $.ajax({
                type: "POST",
                url: "http://xxx/upload/avatar",
                //图片上传的url,大家根据实际来设置哦
                data: fd,
                contentType: false,
                processData: false,
                xhr: function () {
                    // 在xhr函数中对ajax对象进行拓展功能  

                    var xhr = new XMLHttpRequest();
                    
                    // 处理进度条效果
                    // 需要给xhr注册upload.onprogress事件 
                    ==> 上传文件的进度发生改变就会触发
                    // 注意：该事件的注册需要在send之前，否则没有效果
                    xhr.upload.onprogress = function (e) {
                        // 通过事件对象e既可以获取上传文件的总大小以及当前上传的大小
                        // 把e.total（文件的总大小） 取到赋值给 progress进度条的max
                        // 把e.loaded当前上传大小,取到赋值给 progress进度条的value
                        // console.log(e);

                        // 显示进度条
                        progress.show();
                        progress.attr("max", e.total);
                        progress.attr("value", e.loaded);
                    }

                    // 最后需要将增强后xhr返回出去
                    return xhr;
                },
                success: function (info) {
                    // console.log(info);
                    // js对象 ==> 就不需要自己去使用JSON.parse()
                    pic.attr("src", "http://www.xxx" + info.url);
                    //这个是要上传图片至哪个服务器的地址名
                }
            })
        })

后记：

效果就实现了，大家快试试吧~