js生成form表单,来传递文件流参数file和String类型参数id,name,用js如何编写
时间: 2024-01-30 09:01:50 浏览: 64
用表单传递参数
JS 可以通过创建表单元素,设置表单参数,然后以 POST 方式提交表单来实现文件上传。具体的操作步骤如下:
1. 创建一个 form 元素。
```
const form = document.createElement('form');
```
2. 设置 form 的属性和样式。
```
form.method = 'post';
form.enctype = 'multipart/form-data';
form.style.display = 'none';
```
3. 创建 file 类型的 input 元素。
```
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'file';
```
4. 创建其他类型的 input 元素,如 String 类型的参数。
```
const idInput = document.createElement('input');
idInput.type = 'text';
idInput.name = 'id';
idInput.value = '123';
```
5. 将创建的 input 元素添加到 form 中。
```
form.appendChild(fileInput);
form.appendChild(idInput);
```
6. 将 form 元素添加到页面中。
```
document.body.appendChild(form);
```
7. 使用 FormData 对象包装 form,然后发送 POST 请求。
```
const formData = new FormData(form);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.log('上传失败');
}
};
xhr.send(formData);
```
以上是使用 JS 动态生成表单并实现文件上传的基本步骤,具体的实现方式还需要根据具体的业务需求进行调整。
阅读全文