zoukankan      html  css  js  c++  java
  • 获取文件上传进度

    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!
  • 相关阅读:
    mysql之触发器before和after的区别
    字段与属性的区别
    功能性和非功能性需求 UP中FURPS+模型需求分类方式
    脏读、不可重复读 共享锁、悲观锁 和 事务五种隔离级别
    抽象类、接口的区别 和 抽象类可以不实现接口的全部方法
    错误码:2003 不能连接到 MySQL 服务器在 (10061)
    在ubuntu下使用mysql API读取数据库的乱码问题
    vs2010下htmlcxx的编译以及环境的搭建
    effective c++ 条款15 在资源管理类中提供对原始资源的访问
    Qt 依赖包的加载
  • 原文地址:https://www.cnblogs.com/qiuzhilin/p/7244804.html
Copyright © 2011-2022 走看看