博客

AJAX中的异步文件传输

  • Post category:jquery

当我们使用AJAX技术向服务器发送请求时，服务器可以返回不同类型的响应，例如HTML、XML、JSON、字符串等。除此之外，在一些特殊的应用场景下，我们还需要向服务器上传文件，这就需要使用AJAX异步文件传输技术。

以下是AJAX异步文件传输的完整攻略。

1. 使用FormData对象

在实现异步文件传输时，我们需要使用浏览器提供的FormData对象，它可以在不刷新页面的情况下，将表单数据和文件一起发送到服务器。创建FormData对象后，可以向其中添加文件数据，如下所示：

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

在上述示例中，我们使用append()方法向FormData对象中添加一个file字段以及它的值——文件数据。

2. 发送数据并接收响应

文件数据准备完毕后，我们需要通过AJAX方法发送请求，处理服务器的响应。

var xhr = new XMLHttpRequest();
xhr.open('post', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // 处理响应内容
    alert(xhr.responseText);
  }
};
xhr.send(formData);

在上述示例中，我们使用了原生的XMLHttpRequest对象，打开了一个POST请求，并指定其请求地址为/upload。同时，通过readyState属性和status属性判断响应已经成功返回，最后通过responseText属性获取服务器返回的响应内容并进行处理。

3. 代码实现示例

示例 1：基础版

在下面的示例中，我们将会演示一个基础的异步文件上传实例。该示例中使用了HTML5中的input file控件，用户选择一个文件之后，会将它上传到服务器。

HTML代码如下所示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>异步文件上传示例</title>
</head>
<body>
  <form>
    <input type="file" id="file" name="file" />
    <button type="button" id="uploadBtn">上传</button>
  </form>
  <script>
    var uploadBtn = document.getElementById('uploadBtn');
    var file = document.getElementById('file');
    uploadBtn.onclick = function() {
      var formData = new FormData();
      formData.append('file', file.files[0]);

      var xhr = new XMLHttpRequest();
      xhr.open('post', '/upload', true);
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
          alert(xhr.responseText);
        }
      };
      xhr.send(formData);
    };
  </script>
</body>
</html>

上述HTML代码中我们使用了input file控件和一个按钮。用户选择文件后，点击按钮就可以将文件上传到服务器。JavaScript代码中，我们先获取input file控件和按钮元素，然后给按钮添加点击事件监听器。当按钮被点击时，我们创建一个FormData对象，将选择好的文件数据添加进去。接下来，发送AJAX请求到服务器，并在响应返回时弹出成功提示。

示例 2：进阶版

下面的代码展示了如何上传多个文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>异步文件上传示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .file-div-class {
            display: flex;
            margin-bottom: 10px;
        }

        .file-input-class {
            margin-left: 10px;
        }

        .file-button-class {
            margin-left: 10px;
        }

        .file-name-class {
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div id="file-div">
</div>
<button type="button" id="uploadBtn">上传</button>
<script>
    var fileDiv = $('#file-div');    // 文件域
    var btnAddFile = $('#add-file'); // 添加文件按钮
    var uploadBtn = $('#uploadBtn'); // 上传按钮

    // 添加文件操作
    function addFile() {
        fileDiv.append('<div class="file-div-class"><input type="text" class="file-name-class" placeholder="文件名"><input type="file" class="file-input-class"><button type="button" class="file-button-class" onclick="$(this).parent().remove()">删除</button></div>');
    }

    // 上传文件操作
    function uploadFile() {
        var formData = new FormData();
        $('.file-input-class').each(function(i) {
            formData.append('file' + i, this.files[0]);
        });

        $.ajax({
            url: '/upload',
            type: 'POST',
            data: formData,
            cache: false, // 不缓存文件
            processData: false, // 不处理文件数据
            contentType: false, // 不设置内容类型
            success: function(data) {
                alert('上传成功！');
            },
            error: function() {
                alert('上传失败，请重试！');
            }
        });
    }

    uploadBtn.on('click', uploadFile);
    btnAddFile.on('click', addFile);
    addFile();
</script>
</body>
</html>

上述示例中，我们使用了jQuery库操作DOM元素和发送异步请求。页面加载完成后，先调用addFile函数添加一个输入框和一个上传按钮。当用户点击上传按钮时，遍历所有的文件选择框，将选择好的文件添加到FormData对象中。最后，使用ajax()方法向服务器发送请求，并指定必要的参数，如URL地址、请求类型、请求数据等。服务器处理完成后，根据其返回的结果，提示用户上传成功或失败。

以上就是AJAX异步文件传输的完整攻略，包括了使用FormData对象、发送数据和接收响应两个步骤，并给出了示例说明。

Tags: