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对象、发送数据和接收响应两个步骤,并给出了示例说明。