MVC中基于Ajax和HTML5实现文件上传功能

引言

在实际编程中，经常遇到实现文件上传并显示上传进度的功能，基于此目的，本文就为大家介绍不使用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>