Jquery结合HTML5实现文件上传

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, //100MfnRemove: "", //移除文件 ，参数：文件名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
以上所述就是本文的全部内容了，希望大家能够喜欢。