這篇文章要跟大家分享的內容是FormData物件進行Ajax請求並上傳檔案的方法,有需要的朋友可以參考一下。
XMLHttpRequest Level2 新增了一個新的介面-FormData 。 【 主要用於傳送表單資料,但也可以獨立使用於傳輸鍵控資料。與普通的Ajax相比,它能異步上傳二進位檔案 】
#利用FormData對象,可透過js用一些鍵值對來模擬一系列表單控件,還可以使用XMLHttpRequest的send()方法非同步提交表單。
首先,在先前的「前後台互動之傳參方式」中講了傳統的form表單提交的方式(表單序列化),它只適用於傳遞一般參數,上傳文件的文件流是無法被序列化並傳遞的。所以,使用FormData,可以輕鬆的和ajax結合進行檔案上傳。
一、在介紹使用FormData進行Ajax請求並上傳檔案之前,先來認識一下FormData以及它的使用:::::
W3C 草稿提供了三種方案來取得或修改Form Data :::
#WAY1:建立一個空的Form Data 對象,再用append() 逐一添加鍵值對
var oMyForm = new FormData(); // 创建一个空的FormData对象 oMyForm.append("userName","Coco"); // append()方法添加字段 oMyForm.append("accountNum",123456); // 数字123456立即被转换成字符串“123456” oMyForm.append("userFile",fileInputElement.files[0]);var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; var oBlob = new Blob([oFileBody],{type:"text/html"}); // Blob对象包含的文件内容是oFileBody oMyForm.append("webmasterfile",oBlob); var oReq = new XMLHttpRequest(); oReq.open("POST"," .php"); oPeq.send(oMyForm); // 使用XMLHttpRequest的send()把数据发送出去
上面的"userFile"和"webmasterfile"的值都包含了一個檔案;
欄位的值可以是一個Blob對象,File對像或字串,別的型別都會被自動轉換成字串-例如上面的"accountNum" 。
WAY2:取form元素物件作為參數傳入FormData物件中
— 偽代碼—
var new_FormData = new FormData( someFormElement );
範例:
var FormElement = document.getElementById("myFormElement");var oReq = new XMLHttpRequest(); oReq.open("POST"," .php"); oReq.send(new FormData(FormData));
也可以在已有表單基礎上繼續新增新的鍵值對:
var FormElement = document.getElementById("myFormElement");var formData = new FormData(FormElement); formData.append("serialnumber",serialNumber++);var oReq = new XMLHttpRequest(); oReq.send(formData);
可以透過這種方式添加一些不想讓使用者編輯的固定字段,然後再發送。
WAY3:利用form物件的getFormData方法產生
var formobj = document.getElementById("myFormElement"); var formdata = formobj.getFormData();
利用FormData 對象,結合原生的js,透過ajax 實作非同步上傳圖片。當然,現在已有的 jquery 批次上傳的插件,原理就是利用 FormData。
二、使用FormData物件傳送二進位檔案::::::
way1:透過form 表單來初始化FormData
#1、在html 中有一個包含文件輸入框的form 元素
stash the file !2、非同步上傳使用者所選的文件
function sendForm(){ var oOutput = document.getElementById("Output"); var oData = new FormData(document.forms.nameItem("fileInfo")); oData.append("customField","This is some extra data"); var oReq = new XMLHttpRequest(); oReq.open("POST"," .php",true); oReq.onload = function(oEvent){ if(oReq.status == 200){ oOutput.innerHTML = "Uploaded!"; }else{ oOutput.innerHTML = "Error" + oReq.status + "occurred uploading your file!" } }; oReq.send(oData); }
WAY2:不借助form 表單,直接在FormData 物件中新增一個File 物件或一個Blob 物件
var data = new FormData();var oFileBody = "<a id="a"><b id="b">hey!</b></a>";var oBlob = new Blob([oFileBody],{type:"text/html"}); data.append("myfile",oBlob);
如果FormData 物件中某個欄位值是一個Blob 對象,在傳送HTTP 請求時,代表該Blob 物件所包含檔案的檔案名稱的「content-Disposition」 請求的值在不同瀏覽器中不同:
Firefox 使用固定的字串"blob",而chrome則使用一個隨機字串。
WAY3:使用Jquery 傳送FormData(要正確設定相關項目)
var fd =new FormData(document.getElementById("fileinfo")); fd.append("customField","This is some extra data"); $.ajax({ url:" .php", type:"POST", data:fd, processData:false, // 告诉jquery不要处理发送的数据 contentType:false // 告诉jquery不要设置content-Type请求头});
三、範例
1、使用FromData 進行Ajax 請求,並上傳檔案
#<form id="uploadForm"> 指定文件名:<input type="text" name="filename" value=""> 上传文件:<input type="file" name="file"> <input type="button" value="上传" onclick="doUpload()"></form>
function doUpload(){ var formData = new FormData($("#uploadForm")[0]); $.ajax({ url:" .php", type:"POST", data:formData, async:false, cache:false, contentType:false, processData:false, success:function(returndata){ alert(returndata); }, error:function(returndata){ alert("error:"+returndata); } }); }
2、使用FormData 提交表單及上傳圖片
<form name="form" id="formData"> name:<input type="text" name="name"> gender:<input type="radio" name="gender" value="1"> male <input type="radio" name="gender" value="2"> female photo:<input type="file" name="photo" id="photo"> <input type="button" name="btn" value="submit" onclick="submit();"> </form><p id="result"></p>
function submit(){ var data = new FormData($("#formData")[0]); $.ajax({ url:" .php", type:"POST", data:data, dataType:"JSON", cache:false, processData:false, contentType:false }).done(function(ret){ if(ret["isSuccess"]){ var result = ""; result +="name=" + ret["name"] + "<br>"; result += "gender=" + ret["gender"] + "<br>"; result += "<img src='"+ret['photo']+"' style="max-width:90%"FormData物件進行Ajax請求,上傳文件" >"; $("#result").html(result); // 提交成功后将表单数据显示在id="result"的p里面 }else{ alert("提交失败"); } }); return false; }
四、瀏覽器相容性
Chrome | Firefox(Gecko) | IE | Opera | Safari |
7 | 4.0(2.0) | 10 | #12 | 5 |
相關推薦:
#以上是FormData物件進行Ajax請求,上傳文件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

PHP在現代編程中仍然是一個強大且廣泛使用的工具,尤其在web開發領域。 1)PHP易用且與數據庫集成無縫,是許多開發者的首選。 2)它支持動態內容生成和麵向對象編程,適合快速創建和維護網站。 3)PHP的性能可以通過緩存和優化數據庫查詢來提升,其廣泛的社區和豐富生態系統使其在當今技術棧中仍具重要地位。

在PHP中,弱引用是通過WeakReference類實現的,不會阻止垃圾回收器回收對象。弱引用適用於緩存系統和事件監聽器等場景,需注意其不能保證對象存活,且垃圾回收可能延遲。

\_\_invoke方法允許對象像函數一樣被調用。 1.定義\_\_invoke方法使對象可被調用。 2.使用$obj(...)語法時,PHP會執行\_\_invoke方法。 3.適用於日誌記錄和計算器等場景,提高代碼靈活性和可讀性。

Fibers在PHP8.1中引入,提升了並發處理能力。 1)Fibers是一種輕量級的並發模型,類似於協程。 2)它們允許開發者手動控制任務的執行流,適合處理I/O密集型任務。 3)使用Fibers可以編寫更高效、響應性更強的代碼。

PHP社區提供了豐富的資源和支持,幫助開發者成長。 1)資源包括官方文檔、教程、博客和開源項目如Laravel和Symfony。 2)支持可以通過StackOverflow、Reddit和Slack頻道獲得。 3)開發動態可以通過關注RFC了解。 4)融入社區可以通過積極參與、貢獻代碼和學習分享來實現。

PHP和Python各有優勢,選擇應基於項目需求。 1.PHP適合web開發,語法簡單,執行效率高。 2.Python適用於數據科學和機器學習,語法簡潔,庫豐富。

PHP不是在消亡,而是在不斷適應和進化。 1)PHP從1994年起經歷多次版本迭代,適應新技術趨勢。 2)目前廣泛應用於電子商務、內容管理系統等領域。 3)PHP8引入JIT編譯器等功能,提升性能和現代化。 4)使用OPcache和遵循PSR-12標準可優化性能和代碼質量。

PHP的未來將通過適應新技術趨勢和引入創新特性來實現:1)適應云計算、容器化和微服務架構,支持Docker和Kubernetes;2)引入JIT編譯器和枚舉類型,提升性能和數據處理效率;3)持續優化性能和推廣最佳實踐。


熱AI工具

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

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

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

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

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3漢化版
中文版,非常好用

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能