2022-03-07 09:56:00
let formData = new FormData([form]);
简单实例demo
<form id="formElem">
<input type="text" name="name" value="John">
<input type="text" name="surname" value="Smith">
<input type="submit">
</form>
<script>
formElem.onsubmit = async (e) => {
e.preventDefault();
let response = await fetch('/article/formdata/post/user', {
method: 'POST',
body: new FormData(formElem)
});
let result = await response.json();
alert(result.message);
};
</script>
formData.append(name, value) 添加字段formData.append(name, blob, fileName) 添加数据流 (blob:流内容)、(fileName:文件名称)formData.delete(name) 删除字段formData.get(name) 获取字段值formData.has(name) 判断是否存在某个字段formData.set(name, value) 设置字段值formData.set(name, blob, fileName) 设置文件流内容和文件名称
let formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');
for(let [name, value] of formData) {
alert(`${name} = ${value}`);
}
提交含有文件的表单
<form id="formElem">
<input type="text" name="firstName" value="John">
Picture: <input type="file" name="picture" accept="image/*">
<input type="submit">
</form>
<script>
formElem.onsubmit = async (e) => {
e.preventDefault();
let response = await fetch('/article/formdata/post/user-avatar', {
method: 'POST',
body: new FormData(formElem)
});
let result = await response.json();
alert(result.message);
};
</script>
提交含有文件流数据的内容
<body style="margin:0">
<canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>
<input type="button" value="Submit" onclick="submit()">
<script>
canvasElem.onmousemove = function(e) {
let ctx = canvasElem.getContext('2d');
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
};
async function submit() {
let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
let formData = new FormData();
formData.append("firstName", "John");
formData.append("image", imageBlob, "image.png");
let response = await fetch('/article/formdata/post/image-form', {
method: 'POST',
body: formData
});
let result = await response.json();
alert(result.message);
}
</script>
</body>
最后生成于 2023-06-27 21:38:19
热门推荐：
1230博客
