jQuery实现异步上传一个或多个文件

要实现异步上传一个或多个文件通常需要使用jQuery和ajax。下面是具体的攻略：

1. HTML部分

首先，在HTML中需要准备一个表单，在表单中设置enctype="multipart/form-data"属性，并添加一个文件输入框。

<form id="fileupload" action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file" multiple>
  <button type="submit">上传</button>
</form>

2. jQuery部分

借助jQuery，我们可以轻松实现异步上传文件。在JavaScript中，先引入jQuery和jquery.form.js，然后编写一下脚本：

$(document).ready(function() {
  $('#fileupload').submit(function(e) {
    e.preventDefault(); // 防止表单提交
    $(this).ajaxSubmit({
      beforeSend: function() {
        // 文件上传之前，执行一些操作
      },
      uploadProgress: function(event, position, total, percentComplete) {
        // 文件上传进度回调函数
      },
      success: function() {
        // 文件上传成功后回调函数
      },
      error: function() {
        // 文件上传出错后回调函数
      },
      complete: function(xhr) {
        // 文件上传完成后回调函数
      }
    });
  });
});

3. 后台部分

接下来在后台中处理文件。这里以node.js后台为例，下面是一段处理文件上传的代码：

var express = require('express');
var multer = require('multer');
var app = express();

// 上传文件的存储位置和名称，可以自定义
var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});

// 使用multer中间件处理文件上传
app.post('/upload', multer({ storage: storage }).single('file'), function(req, res) {
  // 文件上传成功后的操作
});

在multer中间件中除了destination和filename之外还可以配置文件大小限制、文件类型限制等。

示例

下面是一个实现异步上传一个文件的示例：

<form id="fileupload" action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.3.0/jquery.form.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fileupload').submit(function(e) {
      e.preventDefault();
      $(this).ajaxSubmit({
        beforeSend: function() {
          // 文件上传之前，显示加载进度条
          $('.progress').show();
        },
        uploadProgress: function(event, position, total, percentComplete) {
          // 文件上传进度回调函数
          var percent = percentComplete.toFixed(0) + '%';
          $('.progress-bar').width(percent).html(percent);
        },
        success: function() {
          // 文件上传成功后回调函数
          $('.alert-success').show();
        },
        error: function() {
          // 文件上传出错后回调函数
          $('.alert-danger').show();
        },
        complete: function(xhr) {
          // 文件上传完成后回调函数
          $('.progress').hide();
        }
      });
    });
  });
</script>

下面是一个实现异步上传多个文件的示例：

<form id="fileupload" action="/upload" method="POST" enctype="multipart/form-data">
  <input type="file" name="file" multiple>
  <button type="submit">上传</button>
</form>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.form/4.3.0/jquery.form.min.js"></script>
<script>
  $(document).ready(function() {
    $('#fileupload').submit(function(e) {
      e.preventDefault();
      $(this).ajaxSubmit({
        beforeSend: function() {
          // 文件上传之前，显示加载进度条
          $('.progress').show();
        },
        uploadProgress: function(event, position, total, percentComplete) {
          // 文件上传进度回调函数
          var percent = percentComplete.toFixed(0) + '%';
          $('.progress-bar').width(percent).html(percent);
        },
        success: function() {
          // 文件上传成功后回调函数
          $('.alert-success').show();
        },
        error: function() {
          // 文件上传出错后回调函数
          $('.alert-danger').show();
        },
        complete: function(xhr) {
          // 文件上传完成后回调函数
          $('.progress').hide();
        }
      });
    });
  });
</script>

以上就是jQuery实现异步上传一个或多个文件的完整攻略。