下面要做一个ajax上传文件显示进度的操作：
这里先上代码： 1、前端代码
upload.html
<!DOCTYPE html> <html lang=http://www.likecs.com/"en"> <head> <meta charset=http://www.likecs.com/"UTF-8"> <meta name=http://www.likecs.com/"viewport" content=http://www.likecs.com/"width=device-width, initial-scale=1.0"> <meta http-equiv=http://www.likecs.com/"X-UA-Compatible" content=http://www.likecs.com/"ie=edge"> <title>Document</title> <link href=http://www.likecs.com/"https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css" rel=http://www.likecs.com/"stylesheet"> <style> .progress-area { padding: 20px; } </style> </head> <body> <div class=http://www.likecs.com/""> <p>文件上传</p> <div> <input type=http://www.likecs.com/"file" name=http://www.likecs.com/"file" id=http://www.likecs.com/"file" /> <div class=http://www.likecs.com/"img-preview"> <p>图片预览（如果上传文件时图片）</p> <img id=http://www.likecs.com/"image" src=http://www.likecs.com/"" width=http://www.likecs.com/"200" /> </div> <button id=http://www.likecs.com/"upload">上传</button> <button id=http://www.likecs.com/"btn">终止上传</button> <div class=http://www.likecs.com/"progress-area"> 进度 <div class=http://www.likecs.com/"progress"> <div class=http://www.likecs.com/"progress-bar" id=http://www.likecs.com/"progress" role=http://www.likecs.com/"progressbar" aria-valuenow=http://www.likecs.com/"25" aria-valuemin=http://www.likecs.com/"0" aria-valuemax=http://www.likecs.com/"100">0%</div> </div> </div> </div> </div> <script> (function () { 'use strict'; var file = document.querySelector('#file'); var upload = document.querySelector('#upload'); var progress = document.querySelector('#progress'); var image = document.querySelector('#image'); var xhr = new XMLHttpRequest(); var loaded = 0; var total = 0; upload.addEventListener('click', uploadFile, false); file.addEventListener('change', previewImage, false); // 点击上传 function uploadFile(event) { if(!file.files[0]) { alert('请选择文件') return } var formData = new FormData(); // 利用这个来提交xhr,具体的可看下面的mdn 介绍 // https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects formData.append('test-upload', file.files[0]); // 将input 选择出来的文件调用append()方法来添加字段 xhr.onload =http://www.likecs.com/ uploadSuccess; // 上传方法 xhr.upload.onprogress =http://www.likecs.com/ setProgress; // 上传过程方法 xhr.open('post', '/upload', true); // 打开请求方式和接口 xhr.send(formData); // 发送数据 } // 成功上传 function uploadSuccess(event) { if (xhr.readyState === 4 && xhr.status === 200) { // 判断接口调用成功的重要标识 setTimeout(()=> { alert('上传成功') // window.location.href="http://www.likecs.com/" },1000) } } // 进度条 function setProgress(event) { console.log(event) if (event.lengthComputable) { // 先判断这个上传进程是否有这个文件长度的判断 loaded = event.loaded // 已经加载的字节 total = event.total // 上传伊始时候计算的总字节数 var complete = Number.parseInt(event.loaded / event.total * 100); // 取百分比 progress.style.width = complete + '%'; progress.innerHTML = complete + '%'; // css 偷了懒，用了bootstrap4的css } } // 图片预览 function previewImage(event) { var reader = new FileReader(); // h5 的新属性 reader.onload = function (event) { image.src = event.target.result; // 这里是用图片base64的字符串将图片显示出来，用作图片上传预览 }; reader.readAsDataURL(event.target.files[0]); } //++++++++++++++++++++++++++++++++++++++++++++ xhr.onloadstart =http://www.likecs.com/ function(){ console.log("上传开始"); } btn.onclick =http://www.likecs.com/ function(){ xhr.abort(); console.log("上传被终止."); progress.style.width = 0 + '%'; progress.innerHTML = 0 + '%'; // 这里调用取消上传的代码 }; xhr.ontimeout =http://www.likecs.com/ function(){ console.log('上传超时.'); } // xhr.timeout = 50000; // 默认为0 没有时间限制 // xhr.onabort = function(){ // console.log("The transfer has been canceled by the user."); // } xhr.onerror =http://www.likecs.com/ function(){ console.log("上传错误，可能是断网了，也可能是断请求服务了."); // 这里存在异步传输问题 return } xhr.onloadend =http://www.likecs.com/ function(){ console.log("请求结束"); // 发送上传的请求，至于有没有上传成功，不清楚，可能失败 成功，这里只是请求结束了 } // +++++++++++++++++++++++++++++++++++++++++++ })(); </script> </body> </html>