Ajax方式上傳檔案

用到兩個物件

第乙個物件：formdata

第二個物件：xmlhttprequest

目前新版的firefox 與 chrome 等支援html5的瀏覽器完美的支援這兩個物件，但ie9尚未支援 formdata 物件，還在用ie6 ? 只能仰天長嘆....

有了這兩個物件，我們可以真正的實現ajax方式上傳檔案。

示例**：

很簡潔的**，便可以達到ajax方式上傳檔案，上面的**中使用這種傳統的選擇檔案的方法產生檔案物件，html5還支援使用多種更靈活的方式，如拖拽檔案到指定的元素上產生。

ajax已成功上傳檔案，但這時我們會想到乙個問題，如何顯示進度條？帶著這個問題，腦子會想到，flash? 瀏覽器外掛程式？。

no,現在不需要這些東西了。

開始著手，先做乙個進度條，進度條也很簡單，使用html5 新加的標籤：

這個在瀏覽器中便會呈現了乙個進度條，現在我們要做的就是在上傳的時候，實時的去改變它的value值，然後進度顯示的問題便交給它了。

我們的伺服器端無需修改，只需要在js中xhr物件加乙個事件。

xhr.upload.addeventlistener("progress", progressfunction, false)

progressfunction 被呼叫的時候會傳進乙個事件物件，這個物件有兩個屬性，乙個就是loaded 乙個是total ，分別代表，已上傳的值，和總要上傳的值。

這正是我們需要的，所以這個方法，可以這樣寫：

function progressfunction(evt)

}這樣便可以完成，上傳進度顯示了。

如下針對上面的第乙個示例**，做乙個調整：

示例**2，帶進度顯示：

後台接收檔案的程式可以是任何語言(c#,php,python 等)編寫的，上述例子使用c#

很簡單，無需為這個進度條做任何改動。

var flist = request.files;

for (int i = 0; i < flist.count; i++)

//注釋

Ajax方式上傳檔案

用到兩個物件 第乙個物件 formdata 第二個物件 xmlhttprequest 目前新版的firefox 與 chrome等支援html5的瀏覽器完美的支援這兩個物件，但ie9尚未支援 formdata 物件，還在用ie6 只能仰天長嘆.有了這兩個物件，我們可以真正的實現ajax方式上傳檔案。...

Ajax方式上傳檔案

用到兩個物件 第乙個物件 formdata 第二個物件 xmlhttprequest 目前新版的firefox 與 chrome 等支援html5的瀏覽器完美的支援這兩個物件，但ie9尚未支援 formdata 物件，還在用ie6 只能仰天長嘆.有了這兩個物件，我們可以真正的實現ajax方式上傳檔案...

ajax方式上傳檔案

借助formdata實現表單的序列化，完成檔案上傳 此時不是借助表單提交方式，所以enctype屬性可以去掉 1.表單方式 button data action upload on click function file ajaxupload.do var formdata new formdata...