获取文件上传进度
Posted 兔子牙
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取文件上传进度相关的知识，希望对你有一定的参考价值。
html代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 6 <title>华风创新 - 发布应用</title> 7 <link rel="stylesheet" href="css/base.css"> 8 <link rel="stylesheet" href="css/index.css"> 9 </head> 10 <body> 11 <h1 class="banxin">Upload new File</h1> 12 <form id="form" class="fupload banxin" method=post enctype=multipart/form-data> 13 <input id="FileUpload" type=file name=file> 14 </form> 15 <div class="progress banxin"> 16 <div class="wd"><div class="bar"></div ></div> 17 <div class="percent">0%</div > 18 </div> 19 <div id="status"></div> 20 </body> 21 </html> 22 <script src="js/jquery-1.9.1.min.js"></script> 23 <script src="js/tools.js"></script> 24 <script src="js/form_post.js"></script> 25 <script> 26 $(function() { 27 var bar = $(‘.bar‘); 28 var percent = $(‘.percent‘); 29 var status = $(‘#status‘); 30 31 $(‘form‘).ajaxForm({ 32 beforeSend: function() { 33 status.empty(); 34 var percentVal = ‘0%‘; 35 bar.width(percentVal); 36 percent.html(percentVal); 37 }, 38 uploadProgress: function(event, position, total, percentComplete) { 39 var percentVal = percentComplete + ‘%‘; 40 bar.width(percentVal); 41 percent.html(percentVal); 42 }, 43 complete: function(xhr) { 44 alert(‘上传成功‘) 45 // window.localStorage.setItem(‘updata‘,xhr.responseText) 46 // window.location.href = ‘https://app.tianqi.cn/update/‘ 47 } 48 }); 49 $(‘#FileUpload‘).change(function () { 50 $(‘form‘).submit() 51 }) 52 function file_change() { 53 document.getElementById(‘form‘).submit() 54 $(‘#form‘).ajaxForm({ 55 beforeSend: function() { 56 status.empty(); 57 var percentVal = ‘0%‘; 58 bar.width(percentVal); 59 percent.html(percentVal); 60 }, 61 uploadProgress: function(event, position, total, percentComplete) { 62 var percentVal = percentComplete + ‘%‘; 63 bar.width(percentVal); 64 percent.html(percentVal); 65 }, 66 complete: function(xhr) { 67 alert(‘上传成功‘) 68 // window.localStorage.setItem(‘updata‘,xhr.responseText) 69 // window.location.href = ‘https://app.tianqi.cn/update/‘ 70 } 71 }); 72 } 73 }); 74 75 </script>
以上是关于获取文件上传进度的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Apache HttpClient 4 获取文件上传的进度条？
使用jquery.form.js实现文件上传及进度条前端代码