上传文件与设置进度条

1、引入bootstrap.css和jquery.js;
2、点击按钮后获取文件列表，添加到FormData，调用open函数指定类型与URL地址，在发起请求send（）；
3、监听onreadystatechange事件，当服务器回应后，把传回来的数据转换成JSON字符串，修改img的URL地址，让图片文件显示在页面中；
4、创建xhr对象开启监听文件上传进度，e.lengthComputable是true则计算进度条百分比，把结果给进度条；
5、进度条完成后，修改颜色，移除类添加类

    <link rel="stylesheet" href="../bootstrap.css">
    <link rel="stylesheet" href="../bootstrap.css.map">
    <script src="../jquery.min.js"></script>

HTML

    <!-- 1、文件选择框 -->
    <input type="file" name="" id="file1">

    <!-- 2、上传文件的按钮 -->
    <button id="btnUpload">上传文件</button>


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


    <br/>
    <img src=""  id="img" width="300">

JS

    // 获取上传文件按钮
    var btnUpload = document.querySelector( #btnUpload );
    // 为按钮绑定单击事件处理函数
    btnUpload.addEventListener( click ,function(){

        // 获取到用户选择的文件列表
        var files = document.querySelector( #file1 ).files
        if(files.length <= 0 ) {
            alert( 请选择要上传的文件！ )
        }
        console.log( 用户选择了待上传的文件 );
        var fd = new FormData()

        // 将用户选择的文件添加到fd中
        fd.append( avatar ,files[0])

        // 创建xhr对象
        var xhr = new XMLHttpRequest()


        // 监听文件上传进度
        xhr.upload.onprogress = function(e) {
            // e.lengthComputable是一个布尔值 表明当前上传的长度是否具有可计算的长度
            if(e.lengthComputable) {
                // e.loaded：已传输的字节 
                // e.total：总传输的字节
                // Math.ceil((e.loaded/total) * 100) 已传输的字节/总传输的字节*100获得百分比再由Math.ceil()取整
                var procentComplete = Math.ceil((e.loaded/e.total) * 100)
                console.log(procentComplete);
                // 计算进度条的百分比 修改善度条的html
               // $(selector).attr(attribute,value): 设置属性和值
                $( #percent ).attr( style , width: + procentComplete + % ).html(procentComplete + % )
               
            }
        }
        
        // 监听上传完成的事件
        xhr.upload.onload = function(){
            // 修改善度条颜色：移除当前类名，添加新类名
            $( #percent ).removeClass().addClass( progress-bar progress-bar-success )
        }

        // 调用open函数 指定类型与URL地址
        xhr.open( POST , http://www.liulongbin.top:3006/api/upload/avatar )

        // 发起请求
        xhr.send(fd)

        // 监听onreadystatechange事件
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText)
                console.log(data);
                if(data.status === 200) {
                    document.querySelector( #img ).src =  http://www.liulongbin.top:3006  + data.url
                } else {
                    console.log(data.message);
                }
            }
        }
    })