jquery 上传多个文件

jQuery是一种常用的JavaScript库，可以轻松在Web页面开发中使用，以实现各种功能。其中一个常用功能是上传多个文件。下面我们来学习如何使用jQuery实现该功能。

我们首先需要为文件上传准备一个HTML表单。我们可以使用HTML的form元素，并在其中插入input type="file"元素，如下例所示：

<form id="file-form">
  <input type="file" name="files[]" multiple>
  <input type="submit" value="Upload">
</form>

其中，输入类型为“文件”的input元素需要有一个“name”属性，可以设置为“files[]”，这样我们就可以通过该名称来访问上传的文件。而“multiple”属性允许我们选择多个文件。

接下来，我们需要编写一些JavaScript代码，以便与该HTML表单进行交互。我们可以使用jQuery的$.ajax()函数来向服务器发送请求，上传文件。在此，我们将使用FormData来收集表单中的数据，然后通过XMLHttpRequest发送。以下是我们的JavaScript代码：

$(document).ready(function() {
  $('#file-form').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
      url: 'upload.php', 
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        console.log(response);
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.error(textStatus + " " + errorThrown);
      }
    });
  });
});

在此代码中，我们首先通过submit()函数绑定表单的提交事件，并通过preventDefault()函数阻止表单的默认提交行为。然后，我们创建一个FormData对象，该对象包含我们要上传的所有文件数据。 接下来，我们使用$.ajax()函数向服务器发送请求。在这里，我们指定了url和type属性，分别为上传文件的服务器端脚本和HTTP请求的方式。我们还指定了data属性，该属性包含FormData对象，来将表单数据发送到服务器端。processData和contentType属性需要设置为false，这可以让jQuery自动处理Content-Type头部，同时防止对数据进行序列化。 如果服务器正确处理了文件，我们就可以访问它返回的数据，在上述代码中我们使用console.log()将其输出到浏览器控制台。如果出现错误，我们使用console.error()来将错误信息输出到控制台。

通过以上步骤，我们就可以很容易地使用jQuery上传多个文件。当然，在实际开发中，需要根据具体需求在代码中进行适当的修改。