jQuery HTML5多文件上传：逐个通过AJAX上传

在本文中，我们将介绍jQuery如何使用HTML5的多文件上传功能，并通过AJAX逐个上传文件。

阅读更多：jQuery 教程

概述

HTML5引入了一种新的文件上传技术，允许用户一次选择多个文件进行上传。使用jQuery，我们可以轻松地在网页中实现这种功能。同时，由于文件较多，我们希望能够通过AJAX逐个上传文件，以避免过多的服务器压力。

实现步骤

1. HTML结构

首先，在HTML中创建一个文件选择框和一个显示上传进度的区域。以下是一个简单的例子：

<input type="file" id="file-input" multiple>
<div id="progress-bar"></div>

2. JavaScript代码

接下来，我们使用jQuery来编写JavaScript代码。首先，注册文件选择框的change事件，以便在用户选择文件后执行上传操作。

$(document).ready(function() {
  $('#file-input').on('change', handleFileUpload);
});

3. 上传文件

在handleFileUpload函数中，我们首先获取选择的文件，然后逐个进行上传。我们可以使用FormData来将文件数据添加到AJAX请求中，并通过XMLHttpRequest对象发送请求。以下是一个示例代码：

function handleFileUpload(event) {
  var files = event.target.files;
  var progressBar = ('#progress-bar');

  for (var i = 0; i.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      xhr: function() {
        var xhr = $.ajaxSettings.xhr();
        xhr.upload.onprogress = function(e) {
          if (e.lengthComputable) {
            var percent = Math.round((e.loaded / e.total) * 100);
            progressBar.text('Uploading... ' + percent + '%');
          }
        };
        return xhr;
      },
      success: function() {
        progressBar.text('Uploaded successfully.');
      },
      error: function() {
        progressBar.text('Upload failed.');
      }
    });
  }
}

在上面的示例中，我们通过FormData对象将文件添加到AJAX请求中，设置processData和contentType为false，以避免自动处理数据和设置请求头。通过xhr属性，我们可以获取到XHR对象，并监听其upload.onprogress事件来实时更新上传进度。

4. 后端处理

最后，我们需要在服务器端编写处理文件上传的代码。这部分代码将根据你的具体需求来实现，例如将文件保存到指定位置、生成文件名等等。以下是一个PHP的示例代码：

<?php
targetDir = "uploads/";

if (!empty(_FILES['file']['tmp_name'])) {
  targetFile =targetDir . basename(_FILES['file']['name']);
  move_uploaded_file(_FILES['file']['tmp_name'], $targetFile);
  echo "Upload successful!";
} else {
  echo "Upload failed!";
}
?>

在上面的示例中，我们将上传的文件保存到了名为”uploads”的目录下，并返回上传成功或失败的消息。

总结

通过使用jQuery和HTML5的多文件上传功能，我们可以轻松实现逐个通过AJAX上传文件的功能。通过上述步骤，你可以根据自己的需求进行相应的调整和扩展，并实现更加高级的文件上传功能。希望本文能对你有所帮助！