如何使用JavaScript实现文件上传功能

在Web开发中，使用JavaScript实现文件上传通常依赖<input type="file">元素获取用户选择的文件，再通过FormData和异步请求将文件发送到服务器。这种方式不需要页面刷新，用户体验更好。

一、基础单文件上传

最简单的做法是监听文件输入框的change事件，拿到File对象后放入FormData，用fetch发给接口。

<input type="file" id="fileInput" />
<button id="uploadBtn">上传</button>
<script>
  const input = document.getElementById('fileInput');
  const btn = document.getElementById('uploadBtn');

  btn.addEventListener('click', () => {
    const file = input.files[0]; // 获取选中的第一个文件
    if (!file) {
      alert('请先选择文件');
      return;
    }
    const form = new FormData();
    form.append('file', file); // 字段名file，对应后端接收参数

    fetch('https://ipipp.com/upload', {
      method: 'POST',
      body: form
    })
    .then(res => res.json())
    .then(data => console.log('上传成功', data))
    .catch(err => console.error('上传失败', err));
  });
</script>

二、多文件上传

给input加上multiple属性即可选多个文件，遍历input.files依次添加到FormData。

const input = document.querySelector('input[type=file]');
input.addEventListener('change', () => {
  const form = new FormData();
  for (const file of input.files) {
    form.append('files[]', file); // 使用数组形式提交
  }
  fetch('https://ipipp.com/upload-multi', {
    method: 'POST',
    body: form
  });
});

三、监听上传进度

fetch目前对进度支持有限，可使用XMLHttpRequest获得进度事件。

function uploadWithProgress(file) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://ipipp.com/upload');
  xhr.upload.onprogress = (e) => {
    if (e.lengthComputable) {
      const percent = (e.loaded / e.total) * 100;
      console.log('进度：' + percent.toFixed(1) + '%');
    }
  };
  xhr.onload = () => console.log('完成');
  const form = new FormData();
  form.append('file', file);
  xhr.send(form);
}

四、常见注意点

• 后端需正确解析multipart/form-data格式。
• 大文件建议分片上传并做断点续传。
• 前端应校验文件类型和大小，减少无效请求。

文件上传本质是HTTP二进制流传输，JavaScript只是帮我们在浏览器里完成数据收集和发送。

JavaScript文件上传FormData修改时间：2026-07-26 21:30:13