jquery ajax实现文件上传功能实例代码

下面就详细讲解一下如何利用jquery ajax实现文件上传功能的完整攻略。

一、准备工作

在开始编写代码之前，你需要先确保满足以下条件：

1. 安装jQuery库；
2. 确认后台API接口地址；
3. 确认表单和提交按钮的相关ID或类名；
4. 确认可上传的文件类型和大小限制。

二、代码实现过程

1. 添加文件上传表单和按钮

<form id="form1" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <input type="button" value="上传" id="submit">
</form>

需要注意的是，表单需要指定enctype属性为multipart/form-data，才能支持文件上传。

2. 设置jQuery ajax请求对象

$(document).ready(function() {
  var form = $("#form1");
  var submit = $("#submit");
  var fileInput = $("#file");

  submit.on("click", function() {
    // 获取表单数据并转为JS对象
    var formData = new FormData(form[0]);

    $.ajax({
      url: "your_api_url",
      type: "POST",
      data: formData,
      contentType: false,
      processData: false,
      success: function(data) {
        alert(data);
      }
    });
  });
});

在代码中，我们创建了一个ajax请求对象，其中传入了相关的参数信息：

• url：后台API接口地址；
• type：请求类型，这里是POST请求；
• data：请求数据，这里是上传的文件数据；
• contentType和processData：为了能够上传文件，我们需要将contentType设为false，同时，为了避免jquery对上传数据进行转换，需要将processData设为false；
• success：回调函数，当ajax请求成功时执行。

在点击上传按钮时，首先获取了表单数据并将其转换为JS对象，然后将数据和相关参数传入ajax对象的参数中，最后执行ajax请求。

3. 实现进度条功能

在ajax对象中添加一些参数，即可实现进度条功能：

xhr: function() {
  var xhr = new window.XMLHttpRequest();
  xhr.upload.addEventListener("progress", function(e) {
    if (e.lengthComputable) {
      var progress = e.loaded / e.total * 100;
      console.log(progress);
    }
  }, false);
  return xhr;
}

代码中添加了一个xhr参数，通过重新创建一个XMLHttpRequest对象，并在upload对象的addEventListerner方法中监听进度条的变化。

三、示例说明

示例1

我们现在有一个需求：需要在我们的网站中添加一个文件上传的功能，可以让用户上传一些图片。我们需要将用户上传的图片发送给后台API，并将其保存到服务器上。后台API地址是：http://example.com/upload

<form id="form1" enctype="multipart/form-data">
  <input type="file" name="file" id="file">
  <input type="button" value="上传" id="submit">
</form>

$(document).ready(function() {
  var form = $("#form1");
  var submit = $("#submit");
  var fileInput = $("#file");

  submit.on("click", function() {
    // 获取表单数据并转为JS对象
    var formData = new FormData(form[0]);

    $.ajax({
      url: "http://example.com/upload",
      type: "POST",
      data: formData,
      contentType: false,
      processData: false,
      success: function(data) {
        alert("上传成功！");
      }
    });
  });
});

代码解释：用户选择一个文件，代码将文件上传到http://example.com/upload地址，上传成功后，弹出提示框，提示用户文件上传成功。

示例2

现在我们希望在上传文件的同时，显示上传进度条。

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

$(document).ready(function() {
  var form = $("#form1");
  var submit = $("#submit");
  var fileInput = $("#file");

  submit.on("click", function() {
    // 获取表单数据并转为JS对象
    var formData = new FormData(form[0]);

    $.ajax({
      url: "http://example.com/upload",
      type: "POST",
      data: formData,
      contentType: false,
      processData: false,
      xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener("progress", function(e) {
          if (e.lengthComputable) {
            var progress = e.loaded / e.total * 100;
            $("#progress").html(progress + "%");
          }
        }, false);
        return xhr;
      },
      success: function(data) {
        alert("上传成功！");
      }
    });
  });
});

代码解释：在用户选择文件并点击上传按钮时，会同时显示进度条，用户可以根据进度条的变化来了解上传的进度。最终上传成功后，弹出提示框，并告知用户文件上传成功。