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 相关文章推荐
JavaScript 自动完成脚本整理(33个)
Oct 20 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
小程序富文本提取图片可放大缩小
May 26 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之可变函数的实例详解
2017/09/13 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
JS变量及其作用域
2017/03/29 Javascript
为Jquery EasyUI 组件加上清除功能的方法(详解)
2017/04/13 jQuery
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
js实现简易计算器小功能
2020/11/18 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
python批量生成本地ip地址的方法
2015/03/23 Python
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
以windows service方式运行Python程序的方法
2015/06/03 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python pickle模块实现对象序列化
2019/11/22 Python
暑期社会实践个人总结
2015/03/06 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
道歉信范文
2015/05/12 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
教师旷工检讨书
2015/08/15 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
SQL Server中搜索特定的对象
2022/05/25 SQL Server