這篇文章要跟大家分享的內容是FormData物件進行Ajax請求並上傳檔案的方法,有需要的朋友可以參考一下。
XMLHttpRequest Level2 新增了一個新的介面-FormData 。 【 主要用於傳送表單資料,但也可以獨立使用於傳輸鍵控資料。與普通的Ajax相比,它能異步上傳二進位檔案 】
#利用FormData對象,可透過js用一些鍵值對來模擬一系列表單控件,還可以使用XMLHttpRequest的send()方法非同步提交表單。
首先,在先前的「前後台互動之傳參方式」中講了傳統的form表單提交的方式(表單序列化),它只適用於傳遞一般參數,上傳文件的文件流是無法被序列化並傳遞的。所以,使用FormData,可以輕鬆的和ajax結合進行檔案上傳。
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。
way1:透過form 表單來初始化FormData
#1、在html 中有一個包含文件輸入框的form 元素
616446c85450afc472a9bd8ec9e64146 2e1cf0710519d5598b1f0f14c36ba674your email address:8c1ecd4bb896b2264e0711597d40766c 77ea3818c28708bdfa2d740f63ca84430c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674custom file label:8c1ecd4bb896b2264e0711597d40766c c53720150e0e40fa90d71213512a19430c6dc11e160d3b678d68754cc175188a 2e1cf0710519d5598b1f0f14c36ba674File to stash:8c1ecd4bb896b2264e0711597d40766c 37618ecaa97ade89cdcd8c57e3705350f5a47148e367a6035fd7a2faa965022e8682d3dcb51d71511882c0fb08275db494b3e26ee717c64999d7867364b1b4a334fbcf1a3d1404e3f48634a414c8f9f7stash the file !5db79b134e9f6b82c0b36e0489ee08ed
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']+"'width='100'>"; $("#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中文網其他相關文章!