• 获取文件上传进度


    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>
    View Code
    Don't repeat yourself!
  • 相关阅读:
    nagios监控oracle 表空间
    Oracle报错,ORA-28001: 口令已经失效
    存储基本知识【转载】
    通过shell查找访问日志中访问量最大的ip
    《Java程序设计》 第二周学习任务
    IntelliJ IDEA 激活
    破解某绝地和某DNF辅助
    SMMS:一个不错的免费图床
    Linux使用ASF云挂卡(挂游戏时长)
    Centos7手动编译安装apache
  • 原文地址:https://www.cnblogs.com/qiuzhilin/p/7244804.html
Copyright © 2020-2023  润新知