html页面上传进度条

进度条样式

    #progress-bar {
        width: 500px;
        height: 20px;
        background: #cccccc;
        border-radius: 5px;
    }
    #progress-warp {
        width: 0px;
        height: 20px;
        background: #1B7EE0;
        border-radius: 5px;
    }
    #progress-precent {
        width: 100%;
        height: 100%;
        line-height: 20px;
        font-size: 14px;
        color: #FFFFFF;
        text-align: center;
    }

进度条

<div id="progress-bar">
    <div id="progress-warp"><div id="progress-precent"></div></div>
</div>
<div id="upload-result"></div>
<input type="file" accept=".mp4,.docx" onchange="uploadFile(this)">

js方法

function uploadFile(obj) {
    var file = obj.files[0];
    var fileSize = file.size;  //大小为b
    if (fileSize > 1024 * 1024 * 100) {//100M
        alert("上传文件不能超过100M");
        obj.value = '';
        return false;
    }
    if (file.type != 'audio/mp4' && file.type != 'video/mp4' && file.type != 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
        alert("文件上传格式不正确");
        obj.value = '';
        return false;
    }    
    var formData = new FormData();
    formData.append("file", file);
    //后台接口地址
    var url = locat_file + "/uploadfile";
    var xhr = new XMLHttpRequest();
    //加token
    //xhr.setRequestHeader('token',sessionStorage.getItem('token'));
    xhr.open('post', url, true);
    xhr.onreadystatechange = function () {
        //readystate为4表示请求已完成并就绪
        if (this.readyState == 4) {
            //在进度条下方显示接口返回结果
            document.getElementById('upload-result').innerHTML = this.responseText;
        }
    };
    xhr.upload.onprogress = function (ev) {
        //如果ev.lengthComputable为true就可以开始计算上传进度
        //上传进度 = 100* ev.loaded/ev.total
        if (ev.lengthComputable) {
            var precent = 100 * ev.loaded / ev.total;
            //更改进度条，及百分比
            document.getElementById('progress-warp').style.width = precent + '%';
            document.getElementById('progress-precent').innerHTML = Math.floor(precent) + '%';
        }
    }
    xhr.send(formData);
}

后台

    /**
     * 单文件上传
     *
     * @param file
     * @param request
     * @param response
     * @return
     */
    @RequestMapping(value = "/uploadfile")
    public R uploadfile(@RequestParam("file") MultipartFile file, HttpServletRequest request, HttpServletResponse response) {
        if (file != null) {
            R r = bladeFileService.saveFile(file, request);
            return r;
        } else {
            return R.error("缺失参数");
        }
    }

页面效果