我們在進行檔案上傳，首先從前臺開始，有兩種方案，第一種是使用表單上傳，第二種是使用ajax上傳，前者相對容易，如果想要無重新整理上傳則需要使用後者。接下來一一將起，先從表單的方式。

1：表單檔案上傳
表單的前臺上傳其實上很簡單，只需要設定好enctype=”multipart/form-data”這個屬性就好了。然後在後臺進行處理，我們先來例項一下。

<form action="/file_take" method="post" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type
 
="submit" value="上傳">
</form>

2.ajax檔案上傳
我們想要通過ajax實現檔案上傳，就必須要使用formdata這個物件，首先我們從獲取檔案開始。
可能大家最開始都會以elem.value獲取，不過這裡只能獲取到的是名字，並不是這個檔案，因此我們要知道 一個屬性。

files：表示該元素中獲取到的檔案的集合，注意是集合，如果想要獲取單個檔案內容，則填寫下標則能獲取到了。

不過以上這個屬性，只有ie10以上才支援，因為ie低版本瀏覽器由於js安全問題，所以不允許js訪問本地檔案。
接下來我們如果就以這個上傳的話，會發現上傳的是一個字串，如果想要上傳物件型別，這時候需要FormData物件登場了。

var formdata = new FormData();
formdata.append('file',elem.files[0]);
xhr.send(formdata);

以上我們可以看到，建立了一個formdata物件，通過該物件下的append方法將這個資料變成了一個物件，當我們上傳的時候可以看到，物件的內容會自動變成二進位制資料傳輸，即表單提交方式傳輸一樣。接下來我們介紹一下append這個方法。

append()：該方法給當前FormData物件新增一個鍵/值對，將內容全部以二進位制的方式新增進去了，名字為file，第一個引數名字，第二個引數是內容。
接下來我們就可以利用ajax中的upload物件來進行製作進度條了。

var load = xhr.upload;
load.onprogress = function(ev){
    console.log('傳送量:'+ev.loaded+'傳送總量'+ev.total)
}

通過上傳進度事件，利用時間函式獲取傳送量和總量，然後進行除法就可以得到進度條了。