注意: 上传进度使用xhr.upload.onprogress事件. 下载进度使用xhr.onprogress事件. 上传 进度 12345678910111213141516171819202122232425262728293031323334<form> <input type="file" name="avatar"> <button>上传</button></form><!-- 设置一个进度条,这里使用h5新标签,开始隐藏 --><progress max="0" value="0" style="display: none"></progress><script> document.querySelector('form').onsubmit = function (e) { e.preventDefault(); // 使用FormData收集输入框的值(这里是选择的图片) var fd = new FormData(this); // ajax提交fd对象 // 接口文档,查看ppt即可 var xhr = new XMLHttpRequest(); // 找到 进度条标签 var progress = document.querySelector('progress'); // 注册上传监听事件 xhr.upload.onprogress = function (e) { progress.style.display = 'block'; progress.max = e.total; // 文件总大小,单位字节 progress.value = e.loaded; // 已经上传了多少字节 } xhr.onload = function () { console.log(this.responseText); } xhr.open('POST', 'http://www.itcbc.com:3006/api/formdata'); xhr.send(fd); }</script> 下载进度 12345xhr.onprogress = function (e) { progress.style.display = 'block'; progress.max = e.total; // 文件总大小,单位字节 progress.value = e.loaded; // 已经上传了多少字节}