FormData 对象ç使ç¨
FormData 对象ç¨ä»¥å°æ°æ®ç¼è¯æé®å¼å¯¹ï¼ä»¥ä¾¿ç¨XMLHttpRequestæ¥åéæ°æ®ãå
¶ä¸»è¦ç¨äºåéè¡¨åæ°æ®ï¼ä½äº¦å¯ç¨äºåé另鮿°æ® (keyed data)ï¼èç¬ç«äºè¡¨å使ç¨ãå¦æè¡¨åenctype屿§è®¾ä¸º multipart/form-dataï¼åä¼ä½¿ç¨è¡¨åçsubmit()æ¹æ³æ¥åéæ°æ®ï¼ä»èï¼åéæ°æ®å
·æåæ ·å½¢å¼ã
ä»é¶å¼å§å建 FormData 对象
ä½ å¯ä»¥èªå·±å建ä¸ä¸ªFormData对象ï¼ç¶åè°ç¨å®çappend()æ¹æ³æ¥æ·»å åæ®µï¼åè¿æ ·ï¼
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); //æ°å 123456 ä¼è¢«ç«å³è½¬æ¢æå符串 "123456"
// HTML æä»¶ç±»å inputï¼ç±ç¨æ·éæ©
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // æ°æä»¶çæ£æ
var blob = new Blob([content], { type: "text/xml" });
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
夿³¨ï¼å段 "userfile" å "webmasterfile" é½å
å«ä¸ä¸ªæä»¶ãåæ®µ "accountnum" æ¯æ°åç±»åï¼å®å°è¢«FormData.append() æ¹æ³è½¬æ¢æå符串ï¼å段类åå¯ä»¥æ¯ BlobãFile æè
å符串ï¼å¦æå®çåæ®µç±»å䏿¯ Blob ä¹ä¸æ¯ Fileï¼åä¼è¢«è½¬æ¢æå符串类ï¼ã
ä¸é¢ç示ä¾å建äºä¸ä¸ª FormData å®ä¾ï¼å
å«"username"ã"accountnum"ã"userfile" å "webmasterfile"åä¸ªåæ®µï¼ç¶åä½¿ç¨ XMLHttpRequest ç send() æ¹æ³åéè¡¨åæ°æ®ãåæ®µ "webmasterfile" æ¯ Blob ç±»åãä¸ä¸ª Blob 对象表示ä¸ä¸ªä¸å¯åçï¼åå§æ°æ®ç类似æä»¶å¯¹è±¡ãBlob è¡¨ç¤ºçæ°æ®ä¸ä¸å®æ¯ä¸ä¸ª JavaScript åçæ ¼å¼ã File æ¥å£åºäº Blobï¼ç»§æ¿ blob åè½å¹¶å°å
¶æ©å±ä¸ºæ¯æç¨æ·ç³»ç»ä¸çæä»¶ãä½ å¯ä»¥éè¿ Blob() æé 彿°å建ä¸ä¸ª Blob 对象ã
éè¿ HTML 表åå建 FormData 对象
æ³è¦æé ä¸ä¸ªå å« Form è¡¨åæ°æ®ç FormData 对象ï¼éè¦å¨å建 FormData å¯¹è±¡æ¶æå®è¡¨åçå ç´ ã
夿³¨ï¼FormData å°ä» 使ç¨å ·æ name 屿§çè¾å ¥å段ã
var formData = new FormData(someFormElement);
示ä¾ï¼
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));
ä½ è¿å¯ä»¥å¨å建ä¸ä¸ªå å« Form è¡¨åæ°æ®ç FormData 对象ä¹åååé请æ±ä¹åï¼éå é¢å¤çæ°æ®å° FormData 对象éï¼åè¿æ ·ï¼
var formElement = document.querySelector("form");
var formData = new FormData(formElement);
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
formData.append("serialnumber", serialNumber++);
request.send(formData);
è¿æ ·ä½ å°±å¯ä»¥å¨åé请æ±ä¹åèªç±å°éå ä¸ä¸å®æ¯ç¨æ·ç¼è¾çåæ®µå°è¡¨åæ°æ®éã
ä½¿ç¨ FormData 对象ä¸ä¼ æä»¶
ä½ è¿å¯ä»¥ä½¿ç¨ FormData ä¸ä¼ æä»¶ã使ç¨çæ¶åéè¦å¨è¡¨å䏿·»å ä¸ä¸ªæä»¶ç±»åç inputï¼
<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>Your email address:</label>
<input
type="email"
autocomplete="on"
autofocus
name="userid"
placeholder="email"
required
size="32"
maxlength="64" /><br />
<label>Custom file label:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>File to stash:</label>
<input type="file" name="file" required />
<input type="submit" value="Stash the file!" />
</form>
<div></div>
ç¶å使ç¨ä¸é¢ç代ç åé请æ±ï¼
var form = document.forms.namedItem("fileinfo");
form.addEventListener(
"submit",
function (ev) {
var oOutput = document.querySelector("div"),
oData = new FormData(form);
oData.append("CustomField", "This is some extra data");
var oReq = new XMLHttpRequest();
oReq.open("POST", "stash.php", true);
oReq.onload = function (oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "Uploaded!";
} else {
oOutput.innerHTML =
"Error " +
oReq.status +
" occurred when trying to upload your file.<br />";
}
};
oReq.send(oData);
ev.preventDefault();
},
false,
);
夿³¨ï¼å¦æ FormData 对象æ¯éè¿è¡¨åå建çï¼å表å䏿å®çè¯·æ±æ¹å¼ä¼è¢«åºç¨å°æ¹æ³ open() ä¸ã
ä½ è¿å¯ä»¥ç´æ¥å FormData 对象éå File æ Blob ç±»åçæä»¶ï¼å¦ä¸æç¤ºï¼
data.append("myfile", myBlob, "filename.txt");
ä½¿ç¨ append() æ¹æ³æ¶ï¼å¯ä»¥éè¿ç¬¬ä¸ä¸ªå¯éåæ°è®¾ç½®åé请æ±ç头 Content-Disposition æå®æä»¶åã妿䏿宿件åï¼æè
䏿¯æè¯¥åæ°æ¶ï¼ï¼å°ä½¿ç¨ååâblobâã
å¦æä½ è®¾ç½®æ£ç¡®çé 置项ï¼ä½ ä¹å¯ä»¥éè¿ jQuery æ¥ä½¿ç¨ FormData 对象ï¼
var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false, // ä¸å¤çæ°æ®
contentType: false, // ä¸è®¾ç½®å
容类å
});
ä¸ä½¿ç¨ FormData 对象ï¼éè¿ AJAX æäº¤è¡¨ååä¸ä¼ æä»¶
å¦æä½ æ³ç¥éä¸ä½¿ç¨ FormData å¯¹è±¡çæ åµä¸ï¼å¦ä½åºååå¹¶éè¿ AJAX æäº¤è¡¨åï¼è¯·ç¹å»è¿éã