基于JavaScript实现文件共享型网站

2023年5月27日上午6:35 • JavaScript

下面将详细讲解“基于JavaScript实现文件共享型网站”的完整攻略。

前置条件

熟悉HTML、CSS和JavaScript基本知识；
熟悉Node.js开发环境和相关模块。

操作步骤

1. 创建文件夹

首先在本地文件夹中创建一个新的文件夹，命名为“file-sharing-website”。

2. 初始化项目

打开终端，进入到该文件夹中，执行以下命令：

npm init -y

执行完毕后，会生成一个package.json文件。

3. 安装依赖

执行以下命令，安装Express和Multer模块：

npm install express multer

4. 构建后端

在file-sharing-website文件夹下创建一个新的index.js文件，在其中编写以下代码：

const express = require('express')
const multer = require('multer')

const app = express()

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

const upload = multer({ storage: storage })

app.use(express.static('public'))

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({
    file: req.file.filename
  })
})

app.listen(3000, () => {
  console.log('Server started on port 3000')
})

该文件代码的含义如下：

引入express和multer模块；
创建一个应用实例app；
定义一个Multer的storage对象，用于设置文件存储路径和文件名；
创建一个Multer实例upload；
静态文件目录设置为public，确保网站能够访问静态文件；
设置一个网站的上传路径和上传方法，上传文件类型为file，将上传的文件名返回。

5. 创建前端页面

在file-sharing-website文件夹下创建一个新的public文件夹，再在其中创建一个新的index.html文件，在其中编写以下代码：

<!DOCTYPE html>
<html>
<head>
  <title>基于JavaScript实现文件共享型网站</title>

  <style>
    .container {
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
    }
    .success {
      margin-top: 20px;
      color: green;
    }
    .file-list {
      list-style: none;
      margin: 20px 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>基于JavaScript实现文件共享型网站</h1>

    <form enctype="multipart/form-data">
      <input type="file" name="file" id="file">
      <button type="submit">上传</button>
    </form>

    <div class="success" style="display: none;"></div>

    <ul class="file-list"></ul>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('form').submit(function(e) {
        e.preventDefault();

        var file = $('#file')[0].files[0];
        var formData = new FormData();
        formData.append('file', file);

        $.ajax({
          url: '/upload',
          method: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function(res) {
            $('.success').text('文件上传成功：' + res.file).show();
            listFiles();
          },
          error: function() {
            $('.success').text('文件上传失败').show();
          }
        });
      });

      function listFiles() {
        $.ajax({
          url: '/files',
          success: function(files) {
            var fileList = $('.file-list');
            fileList.empty();

            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              fileList.append('<li><a href="/uploads/' + file + '">' + file + '</a></li>');
            }
          }
        })
      }

      listFiles();
    });
  </script>
</body>
</html>

该文件代码的含义如下：