javascript_如何实现文件上传-js教程-PHP中文网

javascript_如何实现文件上传

紅蓮之龍

发布： 2025-12-03 16:13:50

原创

719人浏览过

答案：JavaScript通过input[type=file]获取文件，利用FormData封装数据，结合fetch或XMLHttpRequest发送至服务器实现上传。1. 添加文件输入框和按钮；2. 用FormData.append()添加文件，fetch发起POST请求；3. 支持多文件时设置multiple属性并遍历files；4. 使用XMLHttpRequest可监听onprogress获取上传进度。需注意后端接口匹配及跨域、大小、类型校验等细节。

javascript_如何实现文件上传

JavaScript 实现文件上传，核心是利用 HTML 的 input[type=file] 和 JavaScript 中的 FormData 配合 fetch 或 XMLHttpRequest 发送请求到服务器。以下是具体实现方式。

1. 基础HTML结构

首先在页面中添加一个文件选择框和上传按钮：

2. 使用 FormData 构造上传数据

获取用户选择的文件，并用 FormData 包装，便于发送多部分请求（multipart/form-data）：

说明： FormData 是专门用于构造表单数据的对象，能自动处理文件字段。

function uploadFile() {
  const fileInput = document.getElementById('fileInput');
  const file = fileInput.files[0];
  if (!file) {
    alert('请选择一个文件');
    return;
  }

  const formData = new FormData();
  formData.append('uploadFile', file); // 字段名根据后端要求设置

  // 使用 fetch 发送请求
  fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('上传成功:', data);
  })
  .catch(error => {
    console.error('上传失败:', error);
  });
}

3. 支持多文件上传

如果需要上传多个文件，只需修改 input 标签并遍历文件列表：

立即学习“Java免费学习笔记（深入）”；

易森网络企业版

如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld