文档上传的+html5页面,Jquery结合HTML5实现文件上传

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

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

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

2.HTML页面代码如下

使用HTML的FormData属性实现文件上传

添加文件

$(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) {

});

}

3.CSS代码如下：

/*源文件头信息：

Copyright(c)2014-2034 Kencery.All rights reserved.

个人博客：http://www.cnblogs.com/hanyinglong

创建人：韩迎龙(kencery)

创建时间：2015-6-24

*/

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));

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