Jquery结合HTML5实现文件上传


Posted in Javascript onJune 25, 2015

1.利用Jquery使用HTML5的FormData属性实现对文件的上传

在HTML5以前我们如果需要实现文件上传服务器等功能的时候,有时候我们不得不依赖于FLASH去实现,而在HTML5到来之后,我们很容易的实现对文件的上传,只需要利用HTML5的一个FormData属性,结合Jquery就很容易实现文件的上传,而且读取文件的上传进度,下面这个上传案例就是基于上面所说的实现的,下面我将所所有的JS和CSS以及HTML页面代码放在下面。

注意事项:FormData属性必须依赖于HTML5,所以如果你按照本文代码实现的功能,则浏览器必须升级为最新(支持HTML5 FormData属性)。

2.HTML页面代码如下

<!DOCTYPE html>
 
 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta charset="utf-8" />
     <title>使用HTML的FormData属性实现文件上传</title>
     <link rel="stylesheet" href="../css/fileUpload.css" />
   </head>
   <body>
     <table id="uploadTable" style="border: 1px;"></table>
     <br/>
     <a href="javascript:void(0);" class="input-file">
       添加文件<input type="file" id="txtFile" style="width:200px;" />
     </a>
     <script type="text/javascript" src="../js/jquery-1.7.1-min.js"></script>
 
     <script type="text/javascript">
       $(function () {
         $('#uploadTable').SalesMOUNDUpload({
           saveUrl: '/Test/Save',
           jqInput: $('#txtFile'),
           fnRemove: removeFile,
           fnComplete: function (d) {
             window.console.log('complete ' + d);
           }
         });
       });
       function removeFile(d) {
         $.post('/Test/Remove', { "filename": d }, function(r) {
           
         });
       }
     </script>
   </body>
 </html>

3.CSS代码如下:

/*源文件头信息:
 <copyright file="FileUpload.js">
 Copyright(c)2014-2034 Kencery.All rights reserved.
 个人博客:http://www.cnblogs.com/hanyinglong
 创建人:韩迎龙(kencery)
 创建时间:2015-6-24
 </copyright>*/
 
 body
 {
   font-family: "微软雅黑";
   font-size: 12px;
 }
 .input-file {
   overflow: hidden;
   position: relative;
 }
 .input-file input {
   opacity: 0;
   filter: alpha(opacity=0);
   font-size: 100px;
   position: absolute;
   top: 0;
   right: 0;
 }
 #uploadTable {
   width: 500px;
   border-collapse: collapse;
   border: 1px solid Silver;
 }

4.JS代码如下:

// 源文件头信息:
// <copyright file="FileUpload.js">
// Copyright(c)2014-2034 Kencery.All rights reserved.
// 创建人:韩迎龙(kencery)
// 创建时间:2015-6-24
// </copyright>
;
(function($) {
  $.fn.SalesMOUNDUpload = function(options) {
    var defaults =
    {
      saveUrl: '',
      jqInput: '',
      maxSize: 1024 * 1024 * 100, //100M
      fnRemove: '', //移除文件 ,参数:文件名
      fnComplete: '' //每个文件成功 ,参数:服务器端返回内容
    };
    var opt = $.extend(defaults, options);
    function getByteToM(val) {
      if (isNaN(val)) return val;
      val = val / (1024 * 1024);
      val = Math.round(val * 100) / 100;
      return val;
    }
    return this.each(function() {
      var $this = $(this);
      $this.empty();
      if (typeof FormData == 'undefine') {
        alert('浏览器版本太低,不支持改上传!');
        return;
      }
      //表头
      if ($this.find('thead').length == 0) {
        var $thead = $('<thead>');
        var $th_tr = $('<tr>');
        $th_tr.append('<th>文件名</th>');
        $th_tr.append('<th>类型</th>');
        $th_tr.append('<th>大小</th>');
        $th_tr.append('<th>状态</th>');
        $th_tr.append('<th>操作</th>');
        $th_tr.appendTo($thead);
        $this.append($thead);
      }
      opt.jqInput[0].addEventListener('change', function(e) {
        var file = this.files[0];
        if (!file) {
          return;
        }
        if (file.size > opt.maxSize) {
          window.alert('文件超过最大');
          return;
        }
        var fd = new FormData();
        var $table = $this;
        fd.append("uploadFile", file);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', opt.saveUrl, true);
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        //表中内容
        var $tr = $('<tr>');
        $tr.append('<td class="upload_name">' + file.name + '</td>');
        $tr.append('<td class="upload_type">' + file.type + '</td>');
        $tr.append('<td class="upload_size">' + getByteToM(file.size) + 'M' + '</td>');
        $tr.append('<td class="upload_status">' + 0 + '</td>');
        $tr.append('<td class="upload_action"><a href="javascript:void(0);">' + '取消' + '</a></td>');
        $tr.find('.upload_action a').unbind('click').bind('click', function() {
          xhr.abort();
        });
        $table.append($tr);
        function uploadProgress(evt) {
          if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
            $tr.find('.upload_status').html(Math.round(percentComplete) + '%');
          } else {
            $tr.find('.upload_status').html('unable to compute');
          }
        }
        function uploadComplete(evt) {
          if (evt.target.status == 200) {
            $tr.find('.upload_status').html('已完成');
            $tr.find('.upload_action a').html('删除');
            if (typeof opt.fnComplete == 'function') {
              opt.fnComplete(evt.target.response);
            }
            $tr.find('.upload_action').unbind('click').bind('click', removeFile);
          }
        }
        function uploadFailed() {
          $tr.find('.upload_status').html('<a href="javascript:void(0);">×</a>');
          $tr.find('.upload_status a').unbind('click').bind('click', function() {
            $tr.remove();
          });
          $tr.find('.upload_action a').html('重试');
          $tr.find('.upload_action a').unbind('click').bind('click', function() {
            xhr.send(fd);
          });
        }
        function uploadCanceled() {
          $tr.remove();
        }
        function removeFile() {
          $tr.remove();
          if (typeof opt.fnRemove == 'function') {
            opt.fnRemove(file.name);
          }
        }
        xhr.send(fd);
      }, false);
    });
  };
}(jQuery));

5.代码查看地址:https://github.com/kencery/Common/tree/master/KenceryCommonMethod/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
jQuery链使用指南
Jan 20 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
浅谈jQuery.easyui的datebox格式化时间
Jun 25 #Javascript
javascript学习笔记之函数定义
Jun 25 #Javascript
把Node.js程序加入服务实现随机启动
Jun 25 #Javascript
javascript控制台详解
Jun 25 #Javascript
jquery实现浮动的侧栏实例
Jun 25 #Javascript
JQuery实现鼠标移动图片显示描述层的方法
Jun 25 #Javascript
Node.js中的process.nextTick使用实例
Jun 25 #Javascript
You might like
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
2019/04/04 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
Python正则表达式经典入门教程
2017/05/22 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
工会工作个人总结
2015/03/03 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
Go遍历struct,map,slice的实现
2021/06/13 Golang
MYSQL 表的全面总结
2021/11/11 MySQL