jQuery Blueimp jQuery文件上传，传递额外的表单数据

在本文中，我们将介绍如何使用jQuery和Blueimp jQuery文件上传插件来实现文件上传，并传递额外的表单数据。

什么是Blueimp jQuery文件上传插件

Blueimp jQuery文件上传插件是一个功能强大且容易使用的jQuery插件，用于在网页中实现文件上传功能。它提供了多文件上传、拖放上传、进度提示以及其他丰富的功能。

如何使用Blueimp jQuery文件上传插件

首先，我们需要在网页中引入jQuery和Blueimp jQuery文件上传插件的相关文件。可以通过CDN引入，也可以下载并放置在本地项目中。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/10.7.2/jquery.fileupload.min.js"></script>

接下来，在HTML中创建一个文件上传区域，并添加相应的标记和样式。

<div id="fileupload">
  <form>
    <input type="file" name="files[]" multiple>
    <input type="text" name="title">
    <button type="submit">上传</button>
  </form>
</div>

在JavaScript中，我们使用插件的fileupload方法来初始化文件上传功能，并配置上传的URL、文件类型、额外的表单数据等。

$(function() {
  $('#fileupload').fileupload({
    url: 'upload.php', // 上传的URL
    dataType: 'json', // 返回数据类型
    formData: { // 额外的表单数据
      username: 'John Doe',
      age: 25
    },
    done: function(e, data) {
      // 上传完成后的回调函数
      console.log(data.result);
    }
  });
});

在以上示例中，我们通过formData参数传递了一些额外的表单数据，例如用户名和年龄。这些数据会在上传过程中一同提交给服务器。

传递额外的表单数据

Blueimp jQuery文件上传插件提供了多种方式来传递额外的表单数据。

通过`formData`参数传递数据

可以通过formData参数传递一个JavaScript对象，对象的属性名将作为表单字段名，属性值将作为表单字段值。

$('#fileupload').fileupload({
  url: 'upload.php',
  dataType: 'json',
  formData: {
    username: 'John Doe',
    age: 25
  },
  // ...
});

通过`add`事件传递数据

可以通过监听add事件，在事件处理函数中修改文件对象的formData属性，添加额外的表单数据。

$('#fileupload').bind('fileuploadadd', function(e, data) {
  data.formData = {
    username: 'John Doe',
    age: 25
  };
});

通过`param`函数传递数据

可以通过覆盖param函数，自定义参数传递的方式。在param函数中可以修改文件对象的formData属性，添加额外的表单数据。

$('#fileupload').fileupload({
  url: 'upload.php',
  dataType: 'json',
  formData: {
    username: 'John Doe',
    age: 25
  },
  param: function(data, options) {
    // 修改额外的表单数据
    data.formData = {
      username: 'John Doe',
      age: 25
    };
    return data;
  }
});

通过以上几种方式，我们可以方便地传递额外的表单数据到服务器端。