jquery实现动态添加附件功能

当我们想要给网站添加附件功能时，通常需要以下步骤：

1. 添加一个上传文件的表单，让用户可以选择本地文件并上传
2. 服务器接收上传的文件并进行处理，将文件保存到合适位置
3. 将上传后的文件信息展现到页面上，让用户方便查看和删除

使用jQuery可以很方便地实现这些功能，下面是完整攻略：

1. HTML代码

首先，在HTML中添加上传文件的表单。比如：

<form id="upload-form" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <input type="submit" value="Upload">
</form>

<div id="attachments"></div>

其中，enctype="multipart/form-data"是让表单支持上传文件的关键。

<div id="attachments"></div>是用于显示已上传文件信息的容器。

2. jQuery代码

接下来，使用jQuery来处理表单的提交和文件的展示。代码如下：

// 当表单提交时
$('#upload-form').on('submit', function (e) {
  e.preventDefault(); // 阻止默认的表单提交行为
  var formData = new FormData(this); // 获取表单数据
  $.ajax({
    url: '/upload', // 上传文件的后台处理地址 
    type: 'POST', // 发送请求的方式
    data: formData, // 表单数据
    processData: false,
    contentType: false,
    success: function (data) {
      console.log('file uploaded.'); // 上传成功后的处理，比如返回文件id等信息进行后续操作
      // 在页面上展示上传后的文件信息
      var attachment = $('<div></div>').text(data.filename).appendTo('#attachments');
      var deleteBtn = $('<button>Delete</button>').appendTo(attachment);
      // 绑定删除按钮的处理函数
      deleteBtn.click(deleteAttachment);

    }
  });
});

// 删除已上传的文件
function deleteAttachment() {
  $(this).closest('div').remove();
}

这段代码实现了以下功能：

• 当表单提交时，阻止默认的表单提交行为；
• 获取表单数据，并使用$.ajax方法向服务器发送请求；
• 上传成功后，将文件信息展示到页面上，同时为每个文件添加一个删除按钮，方便用户删除文件；
• 根据用户选择的文件大小，加载时长及服务器响应速度等因素，上传时间可能会有所不同。可以使用jQuery提供的加载进度事件来给用户提供进度显示等交互效果。

3. 服务器处理

上面的上传代码仅实现了将文件上传至服务器，还需要在服务器端进行处理。这里提供一个简单的node.js后台处理代码示例：

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

const app = express()
const PORT = 3000

// 用multer中间件处理上传文件
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
  }
})
const upload = multer({ storage: storage })

app.use(express.static(__dirname + '/public')) // 静态文件目录

// 处理文件上传请求
app.post('/upload', upload.single('file'), function (req, res, next) {
  const file = req.file
  console.log(file.filename + ' uploaded.')
  res.json({filename: file.filename}) // 返回文件名等信息
})

app.listen(PORT, function () {
  console.log(`Server is listening on ${PORT}!`)
})

这里使用multer中间件来帮助我们处理上传的文件，并将文件保存至本地的uploads/目录中。

示例

下面提供两个完整的示例来帮助大家更好地理解如何使用jQuery实现动态添加附件功能。

• 基于Express的node.js示例
• 基于Django的Python示例

在这些示例中，我们都使用了jQuery来实现上传文件，并在页面上展示已上传的文件信息。同时也提供了删除已上传文件的交互功能，让用户方便地管理自己上传的附件。