首頁 > web前端 > js教程 > FormData+Ajax實作上傳進度監控

FormData+Ajax實作上傳進度監控

亚连
發布: 2018-05-22 09:50:51
原創
1496 人瀏覽過

FormData類型其實是在XMLHttpRequest 2層級定義的,它是為序列化表格以及建立與表單格式相同的資料(當然用於XHR傳輸)提供便利。接下來透過本文來跟大家分享FormData Ajax實作上傳進度監控,需要的朋友一起看看吧

什麼是FormData?

FormData物件可以組裝一組以 XMLHttpRequest傳送請求的鍵/值對。它可以更靈活方便的發送表單數據,因為可以獨立於表單使用。如果你把表單的編碼類型設定為multipart/form-data ,則透過FormData傳輸的資料格式和表單透過submit() 方法傳輸的資料格式相同;

##如何建立一個FormData物件

你可以自己建立一個FormData對象,然後透過呼叫它的append()方法來新增字段,就像這樣:

//实例化一个formData对象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML上的 文件类型input[type=file]的文件框,由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = &#39;<a id="a"><b id="b">hey!</b></a>&#39;; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
登入後複製

注意:欄位「userfile ” 和“webmasterfile” 都包含一個檔案. 欄位「userid」 是數字類型,它將被FormData.append()方法轉換成字串類型(FormData 物件的欄位類型可以是Blob, File, 或string: 如果它的欄位類型不是Blob也不是File,則會轉換成字串型別。上面是我整理給大家的,希望今後會對大家有幫助。程式碼)

php取得ajax的headers方法與內容實例

ajax

fileupload. js實作檔案上傳(附步驟程式碼)

#

以上是FormData+Ajax實作上傳進度監控的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板