使用Jquery书写实现上传文件的插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.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;
}
</style>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
;(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) {
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 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 uploadCanceled() {
$tr.remove();
}

function removeFile() {
$tr.remove();
if (typeof opt.fnRemove == 'function') {
opt.fnRemove(file.name);
}
}
xhr.send(fd);
}, false);

});

};

} (jQuery));
</script>
<script type="text/javascript">
$(function () {
$('#uploadTable').SalesMOUNDUpload(
{
saveUrl: '/Test/Save',
jqInput: $('#txtFile'),
fnRemove: removeFile,
fnComplete: function (d) { console.log('complete ' + d); }
});
});
function removeFile(d) {
$.post('/Test/Remove', { "filename": d }, function (r) { });
}
</script>
</head>
<body>
<table id="uploadTable" border="1px"></table>

<a href="javascript:void(0);" class="input-file">
添加文件
<input type="file" id="txtFile" style="width:200px;" />
</a>

</body>
</html>