Jquery结合HTML5实现文件上传

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

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

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

2.HTML页面代码如下

 
 
 
   
     
     
     
   
   
     
     

     
添加文件
     
     
 
     
   
 

3.CSS代码如下：

 
 
 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(c)2014-2034 Kencery.All rights reserved.
// 创建人：韩迎龙(kencery)
// 创建时间：2015-6-24
// 
;
(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 = $('');
 var $th_tr = $('');
 $th_tr.append('文件名');
 $th_tr.append('类型');
 $th_tr.append('大小');
 $th_tr.append('状态');
 $th_tr.append('操作');
 $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.append('' + file.name + '');
 $tr.append('' + file.type + '');
 $tr.append('' + getByteToM(file.size) + 'M' + '');
 $tr.append('' + 0 + '');
 $tr.append('' + '取消' + '');
 $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('×');
   $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

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