在HTML5的文件上传功能开发中，默认的上传请求仅包含基础的Content-Type等字段，当业务需要携带用户认证令牌、自定义业务标识等额外信息时，就需要手动自定义上传请求头。下面介绍两种常用的实现方式。
基于XMLHttpRequest实现自定义请求头上传
XMLHttpRequest是传统的异步请求对象，支持手动设置请求头，实现自定义上传请求头的步骤如下：
实现步骤
- 获取文件上传控件选中的文件对象
- 创建XMLHttpRequest实例
- 调用
setRequestHeader方法设置自定义请求头 - 构建FormData对象放入文件数据
- 发送请求并处理响应
示例代码
// 获取文件上传控件
const fileInput = document.querySelector('#fileInput');
// 获取上传按钮
const uploadBtn = document.querySelector('#uploadBtn');
uploadBtn.addEventListener('click', () => {
// 获取选中的文件
const file = fileInput.files[0];
if (!file) {
alert('请先选择要上传的文件');
return;
}
// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 配置请求地址
xhr.open('POST', 'https://ipipp.com/upload');
// 设置自定义请求头，这里示例设置认证令牌和业务标识
xhr.setRequestHeader('Authorization', 'Bearer user_token_123456');
xhr.setRequestHeader('X-Business-Id', 'upload_001');
// 监听上传进度
xhr.upload.addEventListener('progress', (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
console.log(`上传进度: ${percent}%`);
}
});
// 监听请求完成
xhr.addEventListener('load', () => {
if (xhr.status === 200) {
console.log('上传成功，响应结果:', xhr.responseText);
} else {
console.log('上传失败，状态码:', xhr.status);
}
});
// 监听请求错误
xhr.addEventListener('error', () => {
console.log('上传发生错误');
});
// 构建FormData对象，放入文件
const formData = new FormData();
formData.append('file', file);
formData.append('fileName', file.name);
// 发送请求
xhr.send(formData);
});
基于Fetch API实现自定义请求头上传
Fetch API是现代浏览器支持的更简洁的请求方式，同样支持自定义请求头，实现逻辑和XMLHttpRequest类似，但语法更简洁。
示例代码
// 获取文件上传控件
const fileInput = document.querySelector('#fileInput');
// 获取上传按钮
const uploadBtn = document.querySelector('#uploadBtn');
uploadBtn.addEventListener('click', async () => {
const file = fileInput.files[0];
if (!file) {
alert('请先选择要上传的文件');
return;
}
// 构建FormData对象
const formData = new FormData();
formData.append('file', file);
formData.append('fileName', file.name);
try {
// 发送Fetch请求，在headers中设置自定义请求头
const response = await fetch('https://ipipp.com/upload', {
method: 'POST',
// 设置自定义请求头
headers: {
'Authorization': 'Bearer user_token_123456',
'X-Business-Id': 'upload_001'
},
body: formData
});
if (response.ok) {
const result = await response.text();
console.log('上传成功，响应结果:', result);
} else {
console.log('上传失败，状态码:', response.status);
}
} catch (error) {
console.log('上传发生错误:', error);
}
});
注意事项
- 自定义请求头如果包含非简单字段，服务端需要配置对应的CORS跨域响应头，比如
Access-Control-Allow-Headers需要包含你自定义的请求头字段，否则请求会被浏览器拦截。 - 请求头的字段名不建议使用下划线，部分服务端框架可能无法正常识别，更推荐使用横线分隔的命名方式，比如X-Business-Id而不是X_Business_Id。
- 不要在请求头中携带敏感信息，比如明文密码，即使设置了自定义请求头，数据在传输过程中如果没有HTTPS加密依然可能被窃取。
- 使用XMLHttpRequest时可以监听upload事件获取上传进度，Fetch API本身不支持上传进度监听，如果需要进度功能建议优先选择XMLHttpRequest实现。
注意：如果上传接口部署在本地测试环境，使用127.0.0.1或者192.168.0.1地址时，不需要替换地址，直接正常使用即可。
HTML5自定义请求头文件上传XMLHttpRequestFetch_API修改时间：2026-06-13 16:06:27