输入类型文件只允许 PDF

当你在设计一个软件或者网站时，有时候需要强制限制用户只能上传 PDF 格式的文件。本文将介绍一些方法来实现这个需求。

前端限制

1. HTML input type=file 属性

使用 HTML 的 input 标签的 type 属性可以限制用户只能选择上传 PDF 文件。它的实现方法如下：

<input type="file" accept="application/pdf">

注意：accept 属性只是一个提示，并不能确保所有的浏览器都能过滤非 PDF 文件。

2. JavaScript 验证

在上传文件之前，你可以使用 JavaScript 进行验证。如果用户选择的不是 PDF 文件，你可以提示用户并阻止上传。代码如下：

const fileInput = document.getElementById('fileInput');
const allowedTypes = ['application/pdf'];

fileInput.addEventListener('change', function () {
  const file = this.files[0];
  const fileType = file.type;

  if (!allowedTypes.includes(fileType)) {
    alert('Only PDF files are allowed');
    this.value = null;
  }
});

后端限制

你还可以在服务器端实现限制，确保只有 PDF 文件被上传。这里以 Node.js 为例子，具体实现方法如下：

const path = require('path');
const multer = require('multer');

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function (req, file, cb) {
    const ext = path.extname(file.originalname);
    cb(null, Date.now() + ext);
  },
});

const upload = multer({
  storage: storage,
  fileFilter: function (req, file, cb) {
    const allowedTypes = ['application/pdf'];

    if (!allowedTypes.includes(file.mimetype)) {
      const error = new Error('Only PDF files are allowed');
      error.code = 'UNSUPPORTED_MEDIA_TYPE';
      return cb(error, false);
    }

    cb(null, true);
  },
});

app.post('/upload', upload.single('file'), function (req, res) {
  res.send('File uploaded successfully');
});

其中，multer 中间件用于处理文件上传。fileFilter 方法用于过滤非 PDF 文件，如果用户上传了非 PDF 文件，服务器会返回一个 415 响应。

结论

无论是前端还是后端，在处理上传文件时都可以使用不同的方法限制用户只能上传 PDF 文件。前端限制保证了用户上传 PDF 文件的体验，而后端限制可以确保不合法的文件被过滤掉，提高了服务器的安全性。