- MDNformdata参考——https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
- MDNformdata参考——https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
FormData API
- 构造函数：
FormData FormData.prototype.append()FormData.prototype.get()FormData.prototype.getAll()FormData.prototype.set()FormData.prototype.has()FormData.prototype.delete()FormData.prototype.entries()FormData.prototype.keys()FormData.prototype.values()
创建formdata对象
从零开始创建
var icon_file = document.getElementById('my_icon');
var fd = new FormData();
// 添加一些数据
fd.append('en_name', 'Pelli');
fd.append('cn_name', '沛笠');
fd.append('age', 18);
fd.append('bug', 'new Error()');
// 添加我的头像文件
// fd.append('my_icon', icon_file.files[0]);
// 获取中文名
var en_name = fd.get('en_name');// "Pelli"
// 获取英文名
var cn_name = fd.get('cn_name');// "沛笠"
// 获取年龄
var age = fd.get('age');// "18"
// 重新设置年龄, 越变越年轻
fd.set('age', 16);
fd.get('age');// "16"
// 新增一个英文名:Jack,我的Rose在哪里？
fd.append('en_name', 'Jack');
// 获取所有的英文名
fd.getAll('en_name');// ["Pelli", "Jack"]
// 把bug删除掉
fd.delete('bug');
// 获取所有的key
var fd_keys = fd.keys();
// 获取所有的value
var fd_vals = fd.values();
// 获取所有的键值
var fd_keys_vals = fd.entries();
// 遍历keys
for(var key of fd_keys){
console.log(key);
}
// 遍历values
for(var val of fd_vals){
console.log(val);
}
// 遍历所有的键值
for(var keyval of fd_keys_vals){
console.log(keyval[0], keyval[1]);
}
使用表单创建formdata数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formdata</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>邮箱地址:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
<label>说明:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>附件:</label>
<input type="file" name="file" required />
<input type="submit" value="提交!" />
</form>
<script type="text/javascript">
var formElement = document.querySelector("form");
var f_data = new FormData(formElement);
// 新增一些自定义数据
f_data.append('my_name', 'Pelli');
var f_ents = f_data.entries();
// 遍历数据
for(for ents of f_ents){
console.log(ents[0], ents[1]);
}
</script>
</body>
</html>
使用formdata上传文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formdata</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>邮箱地址:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
<label>说明:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>附件:</label>
<input type="file" name="file" required />
<input type="submit" value="提交!" />
</form>
<script type="text/javascript">
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {
var oOutput = document.querySelector("div"),
oData = new FormData(form);
oData.append("custom", "自定义数据");
// 发起ajax
var oReq = new XMLHttpRequest();
// 在跨域的时候，如果用到了cookie或者session，需要设置该参数
// 服务器端也需要设置相应的：Access-Control-Allow-Credentials: true
oReq.withCredentials = true;
oReq.open("POST", "stash.php", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
oOutput.innerHTML = "上传成功！";
} else {
oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br />";
}
};
oReq.send(oData);
// 劫持form的默认事件，使用ajax发送数据
ev.preventDefault();
}, false);
</script>
</body>
</html>
使用jQuery上传formdata数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formdata</title>
</head>
<body>
<form enctype="multipart/form-data" method="post" name="fileinfo">
<label>邮箱地址:</label>
<input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
<label>说明:</label>
<input type="text" name="filelabel" size="12" maxlength="32" /><br />
<label>附件:</label>
<input type="file" name="file" required />
<input type="submit" value="提交!" />
</form>
<script type="text/javascript">
var fd = new FormData(document.querySelector("form"));
fd.append("CustomField", "This is some extra data");
// 也可添加blob数据
// fd.append("myfile", myBlob, "filename.txt");
$.ajax({
url: "stash.php",
type: "POST",
data: fd,
processData: false, // 不处理数据
contentType: false, // 不设置内容类型
xhrFields: {// 如果有跨域，并且需要使用session时，需要加上该参数
withCredentials: true
},
success: function(data){
// 成功的回调函数
},
error: function(data){
// 出错的回调函数
}
});
</script>
</body>
</html>
微信公众号:撩码
