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

FormData+Ajax實作上傳進度監控

May 22, 2018 am 09:50 AM
監控 進度

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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

家中監視器一般保存多久 家中監視器一般保存多久 Aug 30, 2023 pm 04:44 PM

家中監視器一般保存一到兩週。詳細介紹:1、更大的儲存容量,可以保存更長時間的錄影;2、硬碟的容量越大,可以保存的錄影時間就越長;3、根據不同地區和法律法規的要求,監控錄影的保存時間可能會有所不同;4、一些高級的監控系統還可以根據運動檢測或特定事件觸發錄像,從而節省存儲空間並提供更有用的錄像。

用於監控網站變化的Python腳本 用於監控網站變化的Python腳本 Aug 29, 2023 pm 12:25 PM

在當今的數位時代,了解網站上的最新變化對於各種目的至關重要,例如追蹤競爭對手網站上的更新、監控產品可用性或隨時了解重要資訊。手動檢查網站是否有更改可能既耗時又低效。這就是自動化發揮作用的地方。在這篇文章中,我們將探討如何建立Python腳本來監控網站變更。透過利用Python的強大功能和一些方便的庫,我們可以自動化檢索網站內容、與先前的版本進行比較並通知我們任何更改的過程。這使我們能夠保持主動並及時對我們監控的網站上的更新或修改做出反應。設定環境在開始編寫腳本來監控網站變更之前,我們需要設定P

如何在FastAPI中實現請求日誌記錄和監控 如何在FastAPI中實現請求日誌記錄和監控 Jul 30, 2023 am 08:29 AM

如何在FastAPI中實現請求日誌記錄和監控引言:FastAPI是一個基於Python3.7+的高效能Web框架,它提供了許多強大的功能和特性,包括自動化的請求和回應模型驗證、安全性、效能最佳化等。在實際開發中,我們經常需要在應用程式中記錄請求日誌以便進行排錯和監控分析。本文將介紹如何在FastAPI中實作請求日誌記錄和監控,並提供對應的程式碼範例。一、安裝依

win10監視器開啟照片的方法 win10監視器開啟照片的方法 Jul 10, 2023 pm 09:41 PM

如果我們手邊沒有手機,只有電腦,但我們必須拍照,我們可以使用電腦內建的監視器拍照,那麼如何打開win10監視器,事實上,我們只需要下載一個相機應用程式。開啟win10監視器的具體方法。 win10監視器開啟照片的方法:1.首先,盤快捷鍵Win+i開啟設定。 2.打開後,進入個人隱私設定。 3.然後在相機手機權限下開啟存取限制。 4.開啟後,您只需開啟相機應用軟體。 (如果沒有,可以去微軟店下載一個)5.打開後,如果電腦內置監控攝像頭或組裝了外部監控攝像頭,則可以拍照。 (因為人們沒有安裝攝

Linux下的即時日誌監控與分析 Linux下的即時日誌監控與分析 Jul 29, 2023 am 08:06 AM

Linux下的即時日誌監控與分析在日常的系統管理和故障排查中,日誌是一個非常重要的資料來源。透過對系統日誌的即時監控和分析,我們可以及時發現異常情況並進行相應的處理。本文將介紹Linux下如何進行即時日誌監控和分析,並提供對應的程式碼範例。一、即時日誌監控在Linux下,最常用的日誌系統是rsyslog。透過配置rsyslog,我們可以實現將不同應用程式的日誌

C#開發建議:日誌記錄與監控系統 C#開發建議:日誌記錄與監控系統 Nov 22, 2023 pm 08:30 PM

C#開發建議:日誌記錄與監控系統摘要:在軟體開發過程中,日誌記錄與監控系統是至關重要的工具。本文章將介紹C#開發中日誌記錄與監控系統的作用與實施建議。引言:在大型軟體開發專案中,日誌記錄和監控是不可或缺的工具。它們可以幫助我們即時了解程式運行狀況,快速發現並解決問題。本文將討論C#開發中如何使用日誌記錄和監控系統,以提高軟體品質和開發效率。日誌記錄系統的作用

Laravel監控錯誤:提升應用穩定性 Laravel監控錯誤:提升應用穩定性 Mar 06, 2024 pm 04:48 PM

在Laravel監控錯誤方面,是提升應用穩定性的重要一環。在開發過程中,難免會遇到各種錯誤,而如何及時發現並解決這些錯誤,是保障應用正常運作的關鍵之一。 Laravel提供了豐富的工具和功能來幫助開發者監控和處理錯誤,本文將介紹其中一些重要的方法,並附上具體的程式碼範例。一、使用日誌記錄日誌記錄是監控錯誤的重要手段之一。 Laravel內建了強大的日誌系統,開發者

如何使用Docker進行容器的監控與效能分析 如何使用Docker進行容器的監控與效能分析 Nov 08, 2023 am 09:54 AM

如何使用Docker進行容器的監控和效能分析概述:Docker是一種流行的容器化平台,透過隔離應用程式和其依賴的軟體包,使得應用程式可以在獨立的容器中運行。然而,隨著容器數量的增加,對容器的監控和效能分析變得越來越重要。在本文中,將介紹如何使用Docker進行容器的監控和效能分析,並提供一些具體的程式碼範例。使用Docker自備的容器監控工具Docker提供了

See all articles