js实现表单上传

2026-04-07 14:57:38JavaScript

表单上传的基本实现

使用HTML的<form>元素结合JavaScript可以实现文件上传功能。以下是一个基础示例：

<form id="uploadForm">
  <input type="file" id="fileInput" name="file">
  <button type="submit">上传</button>
</form>

<script>
  document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const fileInput = document.getElementById('fileInput');
    const file = fileInput.files[0];

    if (!file) {
      alert('请选择文件');
      return;
    }

    const formData = new FormData();
    formData.append('file', file);

    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  });
</script>

多文件上传实现

如果需要上传多个文件，可以修改input元素的multiple属性：

<input type="file" id="fileInput" name="files" multiple>

JavaScript部分需要遍历所有选择的文件：

js实现表单上传

const fileInput = document.getElementById('fileInput');
const files = fileInput.files;
const formData = new FormData();

for (let i = 0; i < files.length; i++) {
  formData.append('files[]', files[i]);
}

上传进度监控

使用XMLHttpRequest可以监控上传进度：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);

xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percentComplete = (e.loaded / e.total) * 100;
    console.log(percentComplete + '% uploaded');
  }
};

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('上传成功');
  } else {
    console.error('上传失败');
  }
};

xhr.send(formData);

文件类型和大小验证

在上传前可以验证文件类型和大小：

js实现表单上传

const file = fileInput.files[0];
const allowedTypes = ['image/jpeg', 'image/png'];
const maxSize = 5 * 1024 * 1024; // 5MB

if (!allowedTypes.includes(file.type)) {
  alert('只支持JPEG和PNG格式');
  return;
}

if (file.size > maxSize) {
  alert('文件大小不能超过5MB');
  return;
}

使用第三方库实现上传

对于更复杂的需求，可以使用第三方库如Dropzone.js：

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<div id="myDropzone" class="dropzone"></div>

<script>
  Dropzone.options.myDropzone = {
    url: "/upload",
    paramName: "file",
    maxFilesize: 5, // MB
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    success: function(file, response) {
      console.log(response);
    }
  };
</script>

服务器端处理示例

Node.js Express处理上传的示例：

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

const app = express();

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ message: '文件上传成功', file: req.file });
});

app.listen(3000);