使用jquery Ajax实现上传附件功能

使用jQuery Ajax实现上传附件功能的完整攻略需要分为以下几个步骤：

1. HTML文件中定义上传表单及相关元素

<form id="upload-form" enctype="multipart/form-data">
  <input type="file" name="file" id="file-input">
  <button type="submit" id="submit-btn">上传</button>
</form>
<div id="progress-bar"></div>

其中，使用enctype="multipart/form-data"指定表单使用多重编码来上传文件，type="file"的input元素用来选择上传文件，progress-bar用来展示上传进度。

1. 在JavaScript文件中编写上传代码

$('#upload-form').on('submit', function(e) {
  e.preventDefault();

  var form = $(this);

  $.ajax({
    url: '/api/upload',
    type: 'POST',
    data: new FormData(form[0]),
    contentType: false,
    processData: false,
    xhr: function() {
      var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
          var percent = Math.round((e.loaded / e.total) * 100) + '%';
          $('#progress-bar').text(percent);
        }
      }, false);
      return xhr;
    },
    success: function(response) {
      console.log(response);
    },
    error: function(xhr, status, error) {
      console.error(error);
    }
  });
});

上述代码中，使用$('#upload-form').on('submit', ...)绑定表单提交事件，使用FormData封装表单数据，contentType: false、processData: false指定不对数据进行处理，xhr.upload.addEventListener('progress', ...)监听上传进度变化。

1. 服务器端处理上传文件
   上传文件需要在服务器端进行处理和保存，这里以Node.js和Express为例子：

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  console.log(req.file);
  res.send('上传成功');
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

上述代码中，使用Express框架接收POST请求，使用multer中间件来处理文件上传，其中upload.single('file')指定只处理单个文件上传，并通过console.log(req.file)打印上传文件的信息。

1. 测试代码并查看效果
   在终端中启动服务器，打开HTML文件，选择文件并点击上传按钮，观察上传进度和返回结果，可以看到文件上传成功并打印出上传文件的信息。

$ node app.js
$ open index.html

至此，使用jQuery Ajax实现上传附件功能的完整攻略已经完成。

示例1：使用jQuery File Upload插件
在实际开发中，可以使用现成的文件上传插件来简化开发工作，例如使用jQuery File Upload插件，只需要在HTML文件中引入相关CSS和JS文件，并调用初始化函数即可。示例如下：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.fileupload/5.72.0/jquery.fileupload.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.fileupload/5.72.0/jquery.fileupload.min.js"></script>

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

<div id="progress-bar"></div>

<script>
$(function () {
    $('#file-input').fileupload({
        url: '/api/upload',
        dataType: 'json',
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress-bar').text(progress + '%');
        },
        done: function (e, data) {
            console.log(data.result);
        }
    });
});
</script>

示例2：使用axios实现文件上传
除了使用jQuery Ajax之外，还可以使用其他Ajax库来实现文件上传，例如axios。示例如下：

<form>
  <input type="file" id="file-input">
  <button type="button" id="upload-btn">上传</button>
</form>

<div id="progress-bar"></div>

<script>
document.querySelector('#upload-btn').addEventListener('click', () => {
  const file = document.querySelector('#file-input').files[0];
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/api/upload', formData, {
    onUploadProgress: function(e) {
      const progress = Math.round((e.loaded / e.total) * 100) + '%';
      document.querySelector('#progress-bar').textContent = progress;
    }
  }).then(response => {
    console.log(response.data);
  }).catch(error => {
    console.error(error);
  });
});
</script>