利用ajax计算文件上传速度&上传到后台

 定义 UI 结构
 验证是否选择了文件
 向 FormData 中追加文件
 使用 xhr 发起上传文件的请求
 监听 onreadystatechange 事件

//引入bootstrap的css样式
//引入jquery的js样式
<!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>

    <!-- bootstrap 中的进度条 -->
    <div class="progress" style="width: 500px; margin: 15px 10px">
        <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
            0%
        </div>
    </div>

    <br />
    <!-- 3. img 标签，来显示上传成功以后的图片 -->
    <img src="" alt="" id="img" width="800" />

    <script>
        // 1. 获取到文件上传按钮
        var btnUpload = document.querySelector("#btnUpload");
        // 2. 为按钮绑定单击事件处理函数
        btnUpload.addEventListener("click", function() {
            // 3. 获取到用户选择的文件列表
            var files = document.querySelector("#file1").files;
            if (files.length <= 0) {
                return alert("请选择要上传的文件！");
            }
            var fd = new FormData();
            // 将用户选择的文件，添加到 FormData 中
            fd.append("avatar", files[0]);

            var xhr = new XMLHttpRequest();

            // 监听文件上传的进度
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    // 计算出上传的进度
                    var procentComplete = Math.ceil((e.loaded / e.total) * 100);
                    console.log(procentComplete);
                    // 动态设置进度条
                    $("#percent")
                        .attr("style", "width: " + procentComplete + "%;")
                        .html(procentComplete + "%");
                }
            };

            xhr.upload.onload = function() {
                $("#percent")
                    .removeClass()
                    .addClass("progress-bar progress-bar-success");
            };

            xhr.open("POST", " //数据库名称//");
            xhr.send(fd);

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    if (data.status === 200) {
                        // 上传成功
                        document.querySelector("#img").src =
                            "http://www.liulongbin.top:3006" + data.url;
                    } else {
                        // 上传失败
                        console.log("图片上传失败！" + data.message);
                    }
                }
            };
        });