引言

在實際編程中，經常遇到實現文件上傳并顯示上傳進度的功能，基于此目的，本文就為大家介紹不使用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>