上传图片文件,进度条显示,显示图片

   <!-- 1. 文件选择框 -->
    <input type="file" id="file1" />
    <!-- 2. 上传按钮 -->
    <button id="btn">上传文件</button>
    <hr>
    <!-- 进度条 -->
    <div class="progress" style="width: 800px;">
        <div class="progress-bar progress-bar-striped active" id="percent" style="width: 0%">
            0%
        </div>
    </div>

    <br />
    <!-- 3. 显示上传到服务器上的图片 -->
    <img src="" alt="" id="img" width="800" />

 <script>
        var btn = document.querySelector('#btn');
        var file = document.querySelector('#file1');

        btn.addEventListener('click', function () {
            var files = file.files;
            console.log(files);
            if (files.length <= 0) {
                return alert('请选择文件后在上传！')
            }

            // 使用FormData对象手机文件数据
            var fd = new FormData();
            fd.append('avatar', files[0])
            
            // 发送ajax请求
            var xhr = new XMLHttpRequest();

            xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')

            //监听上传进度
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    var percentComplete = Math.ceil(e.loaded / e.total * 100) + '%';
                    console.log(percentComplete);
                    document.querySelector('#percent').style.width = percentComplete;
                    document.querySelector('#percent').innerHTML = percentComplete;
                }
            }

            //监听上传完成事件
            xhr.upload.onload = function () {
                document.querySelector('#percent').className = 'progress-bar progress-bar-success'
            }


            xhr.send(fd)

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    console.log(xhr.responseText);
                    var responseTextObject = JSON.parse(xhr.responseText)
                    console.log(responseTextObject);
                    document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + responseTextObject.url;
                }
            }
        })
    </script>