js实现form表单上传文件 并修改Content-Type的值

可以使用FormData对象来实现form表单上传文件，并通过设置XMLHttpRequest的setRequestHeader方法来修改Content-Type的值。以下是一个示例代码：

var formData = new FormData();
formData.append('file', fileInput.files[0]);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('Content-Type', 'image/jpeg');
xhr.send(formData);

其中，fileInput是一个input元素，用于选择要上传的文件。formData.append方法将文件添加到FormData对象中。xhr.setRequestHeader方法设置Content-Type的值为'image/jpeg'。xhr.send方法发送请求。

相关问题

form-data 传参怎么添加content-type

`form-data` 是一种常用的HTTP请求体格式，通常用于发送包含文件或键值对的数据。当你需要设置 `Content-Type` 为上传表单数据时，它通常是 `multipart/form-data`。在JavaScript中，特别是在fetch API或者 Axios 请求中，你可以这样设置：

const formData = new FormData();
// 添加键值对
formData.append('key', 'value');

// 设置请求选项，包括 Content-Type
const options = {
  method: 'POST',
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  body: formData
};

// 发送请求
fetch('your-url', options)
  .then(response => response.json())
  .catch(error => console.error(error));

同样，在使用jQuery的Ajax请求时，可以这样做：

$.ajax({
  url: 'your-url',
  type: 'POST',
  data: formData,
  processData: false,
  contentType: false, // 阻止jQuery默认处理Content-Type
});

这里关键的是`processData: false` 和 `contentType: false`，它们告诉浏览器不自动解析数据，保持原始的 `form-data` 格式。

Content-Type值有哪些

常见的 Content-Type 值包括：

- text/plain：纯文本格式，不含格式信息。
- text/html：HTML 格式，用于网页文本。
- text/css：CSS 格式，用于定义网页样式。
- text/javascript：JavaScript 格式，用于网页脚本。
- application/json：JSON 格式，常用于数据交换。
- application/xml：XML 格式，常用于数据交换和 Web 服务。
- application/octet-stream：二进制流格式，常用于文件下载。
- multipart/form-data：多部分表单格式，常用于文件上传。
- application/x-www-form-urlencoded：常规表单格式，常用于提交表单数据。
- image/jpeg：JPEG 图像格式。
- image/png：PNG 图像格式。
- image/gif：GIF 图像格式。

当然，除了上述常见的 Content-Type 值，还有很多其他的媒体类型，可以根据需要进行扩展。