js怎么实现文件上传-js教程-PHP中文网

js怎么实现文件上传

星降

发布： 2025-08-18 09:37:01

原创

750人浏览过

文件上传需前后端配合，前端用js实现文件选择、读取、数据构建和请求发送。1. 使用<input type="file">选择文件，通过监听change事件获取file对象，读取文件名、大小、类型等信息。2. 利用filereader读取文件内容，支持readasdataurl（图片预览）、readastext（文本读取）、readasarraybuffer（二进制处理）等方式。3. 使用formdata对象构建上传数据，通过append方法添加文件和其他字段。4. 发送请求可使用xmlhttprequest或fetch api，前者支持进度监听，后者语法更简洁。5. 通过xhr.upload.onprogress事件实时获取上传进度，计算已上传字节数与总字节数的比例。6. 常见问题包括跨域（需设置cors）、文件大小和类型限制（前后端双重校验）、上传慢（采用分片上传）、中断续传（记录上传块）。7. 优化体验包括实现图片预览、进度条展示、友好错误提示、拖拽上传和多文件批量上传。完整流程由用户选择文件开始，经前端处理后发送至服务器，后端保存并返回结果，最终完成文件上传功能。

js怎么实现文件上传

文件上传，简单来说，就是把客户端的文件发送到服务器，然后服务器保存起来。这事儿，JS肯定得参与，但光靠JS还不够，得前后端配合。

文件上传，前端JS主要负责选择文件、读取文件信息、构建上传数据，然后用XMLHttpRequest或者Fetch API发送请求。后端则负责接收文件数据、存储文件，并返回结果。

怎么用JS选择文件？

最常见的就是

<input type="file">

登录后复制

标签。用户点击这个标签，浏览器会弹出文件选择对话框。

<input type="file" id="myFile">

<script>
  const fileInput = document.getElementById('myFile');

  fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0]; // 获取选中的第一个文件

    if (file) {
      console.log('文件名：', file.name);
      console.log('文件大小：', file.size);
      console.log('文件类型：', file.type);
    }
  });
</script>

登录后复制

这段代码监听了

change

登录后复制

事件，当用户选择了文件，就能获取到

File

登录后复制

对象，里面包含了文件名、大小、类型等信息。注意

event.target.files

登录后复制

是一个

FileList

登录后复制

对象，里面包含了所有选中的文件，通常我们只取第一个。

如何读取文件内容？

有时候，我们需要在上传前读取文件内容，比如预览图片、校验文件格式等。可以使用

FileReader

登录后复制

对象。

const reader = new FileReader();

reader.onload = (event) => {
  // 文件读取完成，event.target.result 包含文件内容
  console.log('文件内容：', event.target.result);
  // 例如，如果是图片，可以创建一个img标签显示
  const img = document.createElement('img');
  img.src = event.target.result;
  document.body.appendChild(img);
};

reader.onerror = (event) => {
  console.error('文件读取出错：', event.target.error);
};

reader.readAsDataURL(file); // 将文件读取为Data URL

登录后复制

FileReader

登录后复制

提供了多种读取文件的方式：

```
readAsText(file, encoding)
```
登录后复制
: 将文件读取为文本字符串。
```
readAsDataURL(file)
```
登录后复制
: 将文件读取为Data URL，常用于图片预览。
```
readAsArrayBuffer(file)
```
登录后复制
: 将文件读取为
```
ArrayBuffer
```
登录后复制
，用于处理二进制数据。
```
readAsBinaryString(file)
```
登录后复制
(已废弃): 将文件读取为二进制字符串。

如何构建上传数据？

上传文件，通常使用

FormData

登录后复制

对象。它可以模拟一个完整的表单，包含文件和其他数据。

const formData = new FormData();
formData.append('myFile', file); // 添加文件
formData.append('name', 'John Doe'); // 添加其他数据

登录后复制

FormData

登录后复制

对象使用

append()

登录后复制

方法添加数据，第一个参数是字段名，第二个参数是字段值。对于文件，直接添加

File

登录后复制

对象即可。

webuploader-js实现多图片批量上传插件

101

查看详情

如何发送上传请求？

可以使用

XMLHttpRequest

登录后复制

或者

Fetch API

登录后复制

发送请求。

使用XMLHttpRequest：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload'); // 上传接口地址

xhr.onload = () => {
  if (xhr.status === 200) {
    console.log('上传成功：', xhr.responseText);
  } else {
    console.error('上传失败：', xhr.statusText);
  }
};

xhr.onerror = () => {
  console.error('请求出错');
};

xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log('上传进度：', percentComplete.toFixed(2) + '%');
  }
};

xhr.send(formData); // 发送FormData

登录后复制

使用Fetch API：

fetch('/upload', {
  method: 'POST',
  body: formData,
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json(); // 或者 response.text()
})
.then(data => {
  console.log('上传成功：', data);
})
.catch(error => {
  console.error('上传失败：', error);
});

登录后复制

Fetch API 看起来更简洁，但需要注意处理错误情况。

如何显示上传进度？

XMLHttpRequest

登录后复制

提供了

upload.onprogress

登录后复制

事件，可以监听上传进度。

xhr.upload.onprogress = (event) => {
  if (event.lengthComputable) {
    const percentComplete = (event.loaded / event.total) * 100;
    console.log('上传进度：', percentComplete.toFixed(2) + '%');
  }
};

登录后复制