如何使用sweetalert2上传多个文件

sweetalert2是一个强大的JavaScript弹窗库，可以用于创建美观且高度可定制的弹窗。虽然sweetalert2本身并不直接支持文件上传功能，但我们可以结合其他技术来实现多文件上传。

以下是使用sweetalert2上传多个文件的一种可能的实现方式：

首先，确保在你的项目中引入了sweetalert2库。你可以通过在HTML文件中添加以下代码来引入sweetalert2的CSS和JavaScript文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.20/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.20/dist/sweetalert2.all.min.js"></script>

创建一个文件上传的HTML表单，可以使用<input type="file" multiple>来支持多文件选择。例如：

<form id="uploadForm">
  <input type="file" id="fileInput" multiple>
  <button type="submit">上传</button>
</form>

使用JavaScript监听表单的提交事件，并获取选中的文件列表。可以使用FormData对象来构建文件上传请求。例如：

document.getElementById('uploadForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var files = document.getElementById('fileInput').files;
  var formData = new FormData();

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

  // 在这里可以将formData发送到服务器进行文件上传操作
  // 可以使用XMLHttpRequest或者fetch API发送请求
});

在文件上传请求发送之前，可以使用sweetalert2弹窗来显示一个加载中的提示。例如：

Swal.fire({
  title: '上传中',
  html: '文件上传中，请稍候...',
  allowOutsideClick: false,
  onBeforeOpen: () => {
    Swal.showLoading();
  }
});

在文件上传请求完成后，可以根据服务器返回的结果来更新sweetalert2弹窗的内容。例如：

// 假设服务器返回的结果是一个Promise对象
uploadFiles(formData).then(function(response) {
  Swal.fire({
    title: '上传成功',
    text: '文件上传成功！',
    icon: 'success'
  });
}).catch(function(error) {
  Swal.fire({
    title: '上传失败',
    text: '文件上传失败，请重试！',
    icon: 'error'
  });
});

请注意，上述代码中的uploadFiles函数是一个示例，你需要根据你的实际情况来实现文件上传的逻辑。

总结一下，使用sweetalert2上传多个文件的步骤如下：