獲取文件上傳進度
阿新 • • 發佈：2017-07-27
jquer location doctype sta locals ogre tex ini hang 
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 <View Codelink 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>
獲取文件上傳進度