js上传文件到服务器指定路径

什么是JS上传文件到服务器？

JavaScript(简称JS)是一种轻量级的编程语言，主要用于网页开发，在前端开发中，我们经常需要实现文件上传功能，以便用户可以将本地的文件上传到服务器，而使用JavaScript可以方便地实现这一功能，因为它可以直接与HTML中的表单元素进行交互，从而获取用户的选择并将文件发送到服务器。

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

1、创建一个HTML表单

我们需要在HTML中创建一个表单，用于让用户选择要上传的文件，表单的enctype属性设置为multipart/form-data,表示我们将要上传的是二进制文件，还需要添加一个input元素，其type属性设置为file,用于触发文件选择对话框。

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

2、编写JS代码

接下来，我们需要编写JavaScript代码，用于处理表单提交事件，当用户点击上传按钮时，我们的代码将阻止表单的默认提交行为(即页面刷新),然后通过Ajax技术将文件发送到服务器。

document.getElementById('uploadForm').addEventListener('submit', function (event) {
  // 阻止表单默认提交行为
  event.preventDefault();
  // 获取用户选择的文件
  var file = document.querySelector('input[type=file]').files[0];
  // 创建一个FormData对象，用于存储要发送的数据
  var formData = new FormData();
  formData.append('file', file);
  // 使用Ajax技术将文件发送到服务器
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'your-server-url', true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log('文件上传成功');
    } else if (xhr.readyState === 4) {
      console.log('文件上传失败');
    }
  };
  xhr.send(formData);
});

3、在服务器端接收文件

我们需要在服务器端编写代码，用于接收并处理客户端发送的文件，这里以Node.js为例，使用multer库来处理文件上传，首先安装multer:

npm install multer --save

然后在服务器端编写代码：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' }); // 将上传的文件保存到'uploads/'目录下
app.post('/your-server-url', upload.single('file'), function (req, res) {
  console.log('文件接收成功');
  res.send('文件接收成功');
});

如何限制可上传的文件类型？

在实际应用中，我们可能需要限制用户只能上传特定类型的文件，例如图片或文档，这可以通过修改multer的配置来实现，如果我们只允许用户上传JPEG和PNG格式的图片，可以这样配置：

const upload = multer({ dest: 'uploads/', limits: { filesSize: 1000000, files: 1 }, fileFilter: (req, file, callback) => { // 只允许上传JPEG和PNG格式的图片 const allowedExtensions = ['jpg', 'jpeg', 'png']; const mimeTypes = ['image/jpeg', 'image/png']; if (allowedExtensions.includes(path.extname(file.originalname))) { callback(null, true); } else { callback(new Error('只允许上传JPEG和PNG格式的图片')); } } }); // 其他配置保持不变 ... app.post('/your-server-url', upload.single('file'), function (req, res) { ... }); ```