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 实现GridView异步排序、分页的代码
Feb 06 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
JS 实现可停顿的垂直滚动实例代码
Nov 23 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
js Dom实现换肤效果
Oct 21 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
Dec 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强制下载文件函数
2016/08/24 PHP
PHP读取文本文件并逐行输出该行使用最多的字符与对应次数的方法
2016/11/25 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
JavaScript中的prototype使用说明
2010/04/13 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
js中时间格式化的几种方法
2018/07/22 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python中os模块详解
2016/10/14 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
基于Python实现扑克牌面试题
2019/12/11 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
python怎么判断素数
2020/07/01 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
详解python内置模块urllib
2020/09/09 Python
职工小家建设活动方案
2014/08/25 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
司考复习计划
2015/01/19 职场文书
英语投诉信范文
2015/07/03 职场文书