XMLHttpRequest上传文件

一、基本步骤

        // 1.获取上传文件的按钮
        var btnUpload = document.querySelector('#btnUpload')
        // 2.为按钮添加click事件监听
        btnUpload.addEventListener('click', function () {
            // 3.获取到选择的文件列表
            var files = document.querySelector('#file1').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件！')
            }
            // 1.创建FormData对象
            var fd = new FormData();
            // 2.向FormData中追加文件
            fd.append('avatar', files[0]);

            // 1.创建xhr对象
            var xhr = new XMLHttpRequest();
            // 2.调用open函数，指定请求类型与url地址。请求类型必须为POST
            xhr.open('POST', 'http://www.xx.yy:2345/api/upload/avatar');
            // 3.发起请求
            xhr.send(fd);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    if (data.status === 200) {
                        // alert('文件已上传')
                        document.querySelector('#img').src = 'http://www.xx.yy:2345' + data.url
                    } else {
                        alert('文件上传失败')
                    }
                    options.success(result)
                }
            }
        })

1.定义ui结构

    <!-- 1.文件选择框 -->
    <input type="file" id="file1">
    <!-- 2.上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>
    <br />
    <!-- 3.img标签，用来显示文件上传成功以后的图片 -->
    <img src="" alt="" id="img" width="200">

2.验证是否选择了文件

        // 1.获取上传文件的按钮
        var btnUpload = document.querySelector('#btnUpload')
        // 2.为按钮添加click事件监听
        btnUpload.addEventListener('click', function() {
            // 3.获取到选择的文件列表
            var files = document.querySelector('#file1').files;
            if (files.length <= 0) {
                return alert('请选择要上传的文件！')
            }
        })

3.向FormData中追加文件

            // 1.创建FormData对象
            var fd = new FormData();
            // 2.向FormData中追加文件
            fd.append('avatar', files[0])

4.使用xhr发起上传文件的请求

            // 1.创建xhr对象
            var xhr = new XMLHttpRequest();
            // 2.调用open函数，指定请求类型与url地址。请求类型必须为POST
            xhr.open('POST', 'http://www.xx.yy:2345/api/upload/avatar');
            // 3.发起请求
            xhr.send(fd);

5.监听onreadystatechange事件

# xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var data = JSON.parse(xhr.responseText);
                    if (data.status === 200) {
                        // alert('文件已上传')
                        document.querySelector('#img').src = 'http://www.xx.yy:2345' + data.url
                    } else {
                        alert('文件上传失败')
                    }
                    options.success(result)
                }
            }

二、显示文件上传进度

1.通过监听xhr.upload.onprogress事件，来获取文件上传进度

            // 创建xhr对象
            var xhr = new XMLHttpRequest();
            // 监听xhr.upload的onprogress事件
            xhr.upload.onprogress = function(e) {
                // e.lengthComputable表示当前上传资源是否具有可计算长度，是一个布尔值
                if (e.lengthComputable) {
                    // e.loaded已传输的字节
                    // e.total 需传输的总字节
                    var percentComplete = Math.ceil((e.loaded / e.total) * 100)
                }
            }

2.监听上传完成的事件

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