HTML5上传技巧：Ajax与FormData结合使用

从现在开始，努力学习吧！本文《HTML5文件上传技巧：Ajax与FormData完美结合》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

首先使用FormData与Ajax或Fetch API实现文件异步上传，通过HTML文件输入控件获取文件，JavaScript创建FormData对象并添加文件，再利用XMLHttpRequest或fetch发送POST请求至服务器；其次，为提升体验可监听上传进度，其中XMLHttpRequest支持onprogress事件显示进度，而Fetch暂不支持；需确保服务器接收multipart/form-data格式数据。

如果您需要将用户选择的文件通过异步请求上传到服务器，可以利用HTML5提供的File API与Ajax结合FormData对象来实现。这种方式能够避免页面刷新，并支持多种类型的文件传输。以下是具体的操作方式：

一、使用FormData与Ajax上传文件

通过JavaScript创建一个FormData实例，将文件输入框中选中的文件添加进去，再通过XMLHttpRequest或fetch发送请求。这种方法兼容现代浏览器并符合W3C标准。

1、在HTML中定义一个文件输入控件和上传按钮：
<input type="file" id="fileInput" />
上传文件

2、编写JavaScript函数，获取文件并使用FormData封装：
function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  if (!file) {
    alert('请选择一个文件');
    return;
  }
  const formData = new FormData();
  formData.append('uploadedFile', file);

3、使用XMLHttpRequest发送Ajax请求：
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('上传成功:', xhr.responseText);
    }
  };
  xhr.send(formData);
}

确保服务器端接口支持multipart/form-data格式的数据接收。

二、使用Fetch API结合FormData上传

Fetch是现代JavaScript中更简洁的网络请求方式，相比XMLHttpRequest语法更清晰，且原生支持Promise，便于处理异步逻辑。

1、同样获取文件输入元素并读取文件对象：
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
if (!file) {
  alert('请先选择文件');
  return;
}

2、创建FormData实例并将文件加入其中：
const formData = new FormData();
formData.append('uploadedFile', file);

3、调用fetch方法发起POST请求：
fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('上传成功:', data);
})
.catch(error => {
  console.error('上传失败:', error);
});

注意不要手动设置Content-Type头部，让浏览器自动根据FormData生成边界字符串。

三、添加进度监听功能

为了提升用户体验，可以在文件上传过程中显示上传进度。XMLHttpRequest提供了onprogress事件用于监控上传状态。

1、在发送请求前绑定上传进度事件：
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log('上传进度:', percentComplete.toFixed(2) + '%');
  }
};

2、可将进度信息更新至页面上的进度条或文本提示区域，增强交互反馈。

只有使用XMLHttpRequest时才能监听上传进度，fetch目前不支持上传进度事件。

本篇关于《HTML5上传技巧：Ajax与FormData结合使用》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！