引言
在实际编程中，经常遇到实现文件上传并显示上传进度的功能，基于此目的，本文就为大家介绍不使用flash 或任何上传文件的插件来实现带有进度显示的文件上传功能。
基本功能：实现带有进度条的文件上传功能
高级功能：通过拖拽文件的操作实现多个文件上传功能
背景
HTML5提供了一种标准的访问本地文件的方法——File API规格说明，通过调用File API 能够访问文件信息，也可以利用客户端来验证上传文件的类型和大小是否规范。
该规格说明包含以下几个接口来使用文件：
File接口：具有文件的“读权限”，可以获取文件名，类型，大小等。
FileList接口：指单独选定的文件列表，可以通过<input type="file">或拖拽呈现在用户界面供用户选择。
XMLHTTPRequest2是HTML5的无名英雄，XHR2与XMLHttpRequest大体相同，但同时也添加了很多新功能，如下：
1. 增加了上传/下载二进制数据
2. 增加了上传过程中Progess （进度条）事件，该事件包含多部分的信息：
Total：整型值，用于指定传输数据的总字节数。
Loaded：整型值，用于指定上传的字节。
lengthComputable：Bool值用于检测上传文件大小是否可计算。
3. 跨资源共享请求
这些新特性都使得Ajax和HTML5很好的协作，让文件上传变得非常简单，不再需要使用Flash Player、外部插件或html的<form>标签就可以完成，根据服务器端就可以显示上传进度条。
本文会编写一个小型应用程序，能够实现以下功能：
上传单个文件，提供上传进度信息显示。
将图片发送到服务器时，创建图像缩略图。
通过文件列表或拖拽操作实现多个文件上传。
首先我们需要检验浏览器是否支持XHR2,File API,FormData及拖拽操作。
编写代码
如何上传单个文件并显示上传进度？
首先需要做的是创建简单的View :
定义一个表单，由输入文件元素和提交按钮组成。
使用Bootstrap 进度条显示进度。
<div id="FormContent">
<form id="FormUpload"
enctype="multipart/form-data" method="post">
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file"
name="UploadedFile" id="UploadedFile" />
</span>
<button class="btn btn-primary start"
type="button" id="Submit_btn">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button class="btn btn-warning cancel"
type="button" id="Cancel_btn">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>close</span>
</button>
</form>
<div class="progress CustomProgress">
<div id="FileProgress"
class="progress-bar" role="progressbar"
aria-valuenow="" aria-valuemin=""
aria-valuemax="" style="width %;">
<span></span>
</div>
</div>
<div class="InfoContainer">
<div id="Imagecontainer"></div>
<div id="FileName" class="info">
</div>
<div id="FileType" class="info">
</div>
<div id="FileSize" class="info">
</div>
</div>
</div>
</div>
在Onchange 事件中添加输入文件元素，并在JS方法SingleFileSelected使用，因此在用户选择和修改文件时都会调用此方法。在该方法中，我们将选择输入文件元素和访问FileList的文件对象，选择第一个文件files[0]，因此我们可以得到文件名，文件类型等信息。
function singleFileSelected(evt) {
//var selectedFile = evt.target.files can use this or select input file element
//and access it's files object
var selectedFile = ($("#UploadedFile"))[].files[];//FileControl.files[];
if (selectedFile) {
var FileSize = ;
var imageType = /image.*/;
if (selectedFile.size > ) {
FileSize = Math.round(selectedFile.size * / ) / + " MB";
}
else if (selectedFile.size > ) {
FileSize = Math.round(selectedFile.size * / ) / + " KB";
}
else {
FileSize = selectedFile.size + " Bytes";
}
// here we will add the code of thumbnail preview of upload images
$("#FileName").text("Name " + selectedFile.name);
$("#FileType").text("type " + selectedFile.type);
$("#FileSize").text("Size " + FileSize);
}
}
</div>
可以通过File reader对象从内存读取上传文件内容。reader 对象提供很多事件，onload,onError以及四种读取数据的函数readAsBinaryString(), readAsText()，readAsArrayBuffer(), readAsDataURL(),result属性表示文件内容。该属性只有当读操作执行完成后才有效，数据格式根据调用的初始化读操作制定的。
在这里就不详细解释File reader，我们会在SingleFileSelected 方法中使用，用于预览图像，查看代码：
if (selectedFile.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function (e) {
$("#Imagecontainer").empty();
var dataURL = reader.result;
var img = new Image()
img.src = dataURL;
img.className = "thumb";
$("#Imagecontainer").append(img);
};
reader.readAsDataURL(selectedFile);
}
</div>
到现在为止，就可看到下图：
现在需要将已上传的文件发送到服务器，因此添加Onclick事件，并在JS uploadFile()方法中调用，代码如下：
function UploadFile() {
//we can create form by passing the form to Constructor of formData object
//or creating it manually using append function
//but please note file name should be same like the action Parameter
//var dataString = new FormData();
//dataString.append("UploadedFile", selectedFile);
var form = $('#FormUpload')[];
var dataString = new FormData(form);
$.ajax({
url '/Uploader/Upload', //Server script to process data
type 'POST',
xhr function () { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) { // Check if upload property exists
//myXhr.upload.onprogress = progressHandlingFunction
myXhr.upload.addEventListener('progress', progressHandlingFunction,
false); // For handling the progress of the upload
}
return myXhr;
},
//Ajax events
success successHandler,
error errorHandler,
completecompleteHandler,
// Form data
data dataString,
//Options to tell jQuery not to process data or worry about content-type.
cache false,
contentType false,
processData false
});
}
</div>
在该方法中，发送表单，使用Form 数据对象来序列化文件值，我们可以手动创建formdata数据的实例化，通过调用append()方法将域值挂起，或是通过检索HTML 表单的FormData对象。
progressHandlingFunction方法会提供检验上传文件Size 是否可计算，使用e.loaded和e.total计算出已上传百分之多少的数据。
function progressHandlingFunction(e) {
if (e.lengthComputable) {
var percentComplete = Math.round(e.loaded * / e.total);
$("#FileProgress").css("width",
percentComplete + '%').attr('aria-valuenow', percentComplete);
$('#FileProgress span').text(percentComplete + "%");
}
else {
$('#FileProgress span').text('unable to compute');
}
}
</div>
现在已经实现了基本的发送数据及提供进度条的功能，接