使用ajax上传文件，
创建Formdate加入文件ajax上传利用progress事件实现进度前端显示上代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> function uploadFile() { //获取上传的文件 var uploadFile = $('#upload-file')[0].files[0]; console.log(uploadFile); var formdata = new FormData(); formdata.append('fileInfo', uploadFile); $.ajax({ url: 'up.php', type: 'post', data: formdata, dataType: 'json', processData: false, contentType: false, xhr: function() { var xhr = new XMLHttpRequest(); //使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件 xhr.upload.addEventListener('progress', function (e) { //console.log(e); //loaded代表上传了多少 //total代表总数为多少 var bai=e.loaded / e.total*100; var progressRate = "上传进度"+bai.toFixed(2) + '%'; //console.log("上传进度"+progressRate); $("#jd").html(progressRate); //通过设置进度条的宽度达到效果 }) return xhr; } }) } </script> </head> <body> <input type="file" id="upload-file" multiple="multiple"> <div id="jd" style="margin:20px"> </div> <button onclick="uploadFile()">上传</button> </body> </html>解释一点东西 主要是传送数据的时候，有一个progress事件，用来返回进度信息。
loaded 已经传输的字节total 需要传输的总字节原生写法参考
xhr.onprogress = updateProgress; xhr.upload.onprogress = updateProgress; function updateProgress(event) { if(event.lengthComputable) { var percentComplete = event.loaded / event.total; } }有任何问题都可私信博主，或者QQ联系：3194523872
