一、formdata.append怎么用
FormData.append() 函数用于将一个新的数据项添加到 FormData 对象。以下是使用示例：
var formdata = new FormData();
formdata.append('username', 'ABC');
formdata.append('email', 'ABC@example.com');
通过上述示例代码，可以在 FormData 对象里添加一个键值对。append() 方法接收两个参数，第一个参数 key 即是表单元素的 name 值，也是该数据项的键名，第二个参数即是该数据项的值。
此外，如果需要上传文件，则需要用到 fileReader 的相关API,以一个上传图片的为例：
function preview() {
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var img = document.getElementById('preview');
img.src = e.target.result;
var formdata = new FormData();
formdata.append('image',file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.send(formdata);
}
}
在该示例中，首先需要构造一个上传文件的 input 元素，再监听该元素的 onchange 事件。当用户选择了文件后，会自动触发事件处理函数 preview()。在该函数中，从 fileInput 元素中读取 file 对象并使用 FileReader API读取图片信息并显示到 img 元素上。接着创建 FormData 对象并将 file 对象添加到其中，通过 XMLHttpRequest 发送至服务器端。在服务器端，通过 req.files.file 属性即可获取到文件对象。
二、formdata.append函数没用
无论是表单元素的值，还是文件对象，都可以通过 append() 方法添加到 FormData 对象中。但是，如果表单元素的值是一个空字符串或者为 null，那么通过该方法添加到 FormData 对象中时会被忽略。
表单中的一些元素是如下：
北京
上海
广州
可以看到，几个元素都有默认值。要注意的是，select 元素的默认值是 selected 属性，而不是 value 属性。如果未指定 selected 属性，那么默认选中的就是第一个 option 标签。对于 checkbox 元素，如果未指定 checked 属性，那么默认是不选中的。
对于 textarea 标签，如果不设置 value 属性，默认是一个空字符串。设置了 value 属性就会将默认值覆盖掉。在提交表单时，无论默认值是什么，都会进行重置。如果想要获取表单元素的默认值，可以通过 js 获取元素的 value 属性。
三、formdata.append无效果
在一些情况下，使用 formdata.append 添加到 FormData 对象中的数据项并没有达到预期效果，这可能会给开发带来困扰。
首先要考虑是否将 FormData 对象通过 XMLHttpRequest 发送到服务器端，如果没有发送，则 setData() 方法会返回 undefined，请求头中也不会有该参数。
其次，需要确保添加的数据项的键名和键值是有效的。如果键名或键值无效，该数据项也不会被添加到 FormData 对象中。需要注意的是，键名不能包含特殊字符，比如空格、+、&、=等；键值可以是任何类型，包括字符串、数字、布尔型、对象、文件对象等。
还有一种情况是，在使用 XMLHttpRequest() 发送 FormData 对象时，服务器端程序的处理方式可能也会影响添加数据项的效果。比如，对于 PHP、Node.js、.NET 等服务器端程序，需要根据参数的名称和类型进行相应的解析，才能正确获取数据。如果在发送请求的过程中没有对参数进行有效的编码，那么极有可能导致参数格式错误、接收不到参数等问题。
四、formdata.append第三个参数选取
1、用于设定文件名参数（filename）
let file = document.getElementById('fileInput').files[0];
let form = new FormData();
form.append('file', file, 'test.jpg');
这样就设定了文件名参数为 test.jpg, 上传至服务器端时，以该文件名存储至文件系统。
2、用于设定 content-type 参数
var xhr = new XMLHttpRequest(),
formData = new FormData(),
fileToSend = document.getElementById('file').files[0];
formData.append("file", fileToSend, "example.png");
xhr.open("POST", "example.php");
xhr.setRequestHeader("Content-Type","multipart/form-data");
xhr.send(formData);
该参数用于设定提交内容的类型，一般用于后端解析数据串。
3、其他参数
实际上，对于 formdata.append，只要第一个参数 name 和第二个参数 value 合法即可，其他参数都是可选的。如果有第三个参数，则表明当前 name 值是一个文件对象并且设定了文件名或者 content-type。
如果没有设定第三个参数，则表明 current value 将视为一个普通的字符串。此时，对应的 value 值将会被视为 text/plain 类型。所以不需要缩小数据类型，一律按照String打入即可。
原创文章，作者：ZFGN，如若转载，请注明出处：https://www.506064.com/n/143548.html
微信扫一扫 
支付宝扫一扫 