洞察秘籍：创建惊艳的自定义文件上传功能

2024-01-09 04:38:03

开篇：揭秘自定义文件上传的魅力

在当今数据驱动的时代，文件上传功能已成为应用程序不可或缺的一部分。无论是简单的个人资料图片上传，还是复杂的多媒体文件共享，自定义文件上传功能都能为用户带来更便捷、更个性化的体验。

一、前端构建：构建文件上传组件

1. 搭建组件脚手架：

(1) HTML 结构：

<div class="file-upload">
  <label for="file-input">
    <span class="file-upload-button">选择文件</span>
    <input type="file" id="file-input" multiple hidden>
  </label>
  <div class="file-upload-list"></div>
</div>

(2) JavaScript 代码：

const fileInput = document.getElementById('file-input');
const fileList = document.querySelector('.file-upload-list');

fileInput.addEventListener('change', function() {
  // 获取选择的文件
  const files = this.files;

  // 循环处理每个文件
  for (let i = 0; i < files.length; i++) {
    const file = files[i];

    // 创建文件列表项
    const fileListItem = document.createElement('li');
    fileListItem.classList.add('file-upload-item');

    // 创建文件名称文本
    const fileNameText = document.createElement('p');
    fileNameText.classList.add('file-upload-item-name');
    fileNameText.textContent = file.name;

    // 创建文件大小文本
    const fileSizeText = document.createElement('p');
    fileSizeText.classList.add('file-upload-item-size');
    fileSizeText.textContent = file.size + ' bytes';

    // 将文件名称和文件大小文本添加到文件列表项
    fileListItem.appendChild(fileNameText);
    fileListItem.appendChild(fileSizeText);

    // 将文件列表项添加到文件列表
    fileList.appendChild(fileListItem);
  }
});

2. 处理文件上传：

(1) 表单数据：

const formData = new FormData();

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

(2) 发送请求：

fetch('upload.php', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => {
  // 处理服务器响应
});

二、后端搭建：构建文件上传接口

1. 服务器端语言：

(1) PHP 示例：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // 处理文件上传
  if (isset($_FILES['file'])) {
    $errors = array();

    foreach ($_FILES['file']['tmp_name'] as $key => $tmp_name) {
      if ($_FILES['file']['size'][$key] > 2097152) {
        $errors[] = 'File size too large. The maximum file size is 2MB.';
      }

      if (move_uploaded_file($tmp_name, 'uploads/' . $_FILES['file']['name'][$key])) {
        // 文件上传成功
      } else {
        $errors[] = 'File upload failed.';
      }
    }

    if (empty($errors)) {
      // 成功上传所有文件
      echo 'Files uploaded successfully.';
    } else {
      // 处理上传错误
      echo implode('\n', $errors);
    }
  }
}

(2) Node.js 示例：

const multer = require('multer');

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

const upload = multer({ storage: storage });

app.post('/upload', upload.array('file'), (req, res) => {
  // 处理文件上传
  res.json({
    success: true,
    message: 'Files uploaded successfully.'
  });
});