如何在提交表单时附加额外数据


在上传表单中添加 input 字段


提交表单时附加额外数据最简单的办法就是在表单元素中直接添加附加的 input 字段:

<form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="example1" value="test">
    <div class="row">
        <label>Example: <input type="text" name="example2"></label>
    </div>
    <!-- ... -->
</form>

默认情况下,插件会调用 jQuery 的 serializeArray 方法来采集所有的 input 字段(包括 hidden)。

这些表单字段的值会与选定的文件一起提交到服务端。

注意:

如果你有设置 formData 配置项,那上述的表单字段数据是不进行提交的,因为 formData 所设置的对象会替代为所要提交的数据。

不过,这种情况下你可以手动调用 jQuery 的 serializeArray 方法来创建一个囊括了表单字段的 formData 对象:

var formData = $('form').serializeArray();

以编程方式添加额外数据


formData 配置项(请参阅配置项手册)能够以编程方式为表单附加额外数据,例如:

$('#fileupload').fileupload({
    formData: {example: 'test'}
});
开始上传时设置 formData

一个常见的用例是在上传开始时设置 formData 配置项。

这可以通过将回调绑定到“submit”事件来轻松实现:

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    // The example input, doesn't have to be part of the upload form:
    var input = $('#input');
    data.formData = {example: input.val()};
    if (!data.formData.example) {
      data.context.find('button').prop('disabled', false);
      input.focus();
      return false;
    }
});
注意:如果 submit 回调返回 false,则上传请求时不会提交的。
开始上传时为每个文件单独设置 formData

首先,我们要改下 upload 模板,给文件添加一个带有 title 输入字段的新单元格:

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <!-- ... -->
        <td class="title"><label>Title: <input name="title[]" required></label></td>
        <!-- ... -->
    </tr>
{% } %}
</script>

title 字段中,字段 name 为“title[]”表示其是一个多文件上传请求。“required”则代表文件不能为空,否则不能提交上传。

接下来我们要给“submit”事件绑定一个回调函数以通过 upload 行的 context 采集表单数据(该 context 是插件在 add 回调中设到 upload 行节点里的):

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    var inputs = data.context.find(':input');
    if (inputs.filter(function () {
            return !this.value && $(this).prop('required');
        }).first().focus().length) {
        data.context.find('button').prop('disabled', false);
        return false;
    }
    data.formData = inputs.serializeArray();
});

如何异步获取及设置表单数据


请阅读提交文件异步扩展页面了解如何实现。

在服务端处理额外的表单数据 Handling additional form data on server-side


额外附加的表单数据会以标准 POST 参数提交到服务端。

例如,若表单中有一个额外 input 框的 name 属性为 example1,那在服务端接收到的 POST 参数中就会存在一个 example1 参数。

对设置 formData 对象的情况也是一样,formData: {example2: 'test'} 提交到服务端,那么其会接收到一个 example2 参数,值为“test”。

PHP

在插件的 PHP 上传处理示例中定义了一个用来处理附加数据的函数,即 handle_form_data

<?php
// ...
    protected function handle_form_data($file, $index) {
        // Handle form data, e.g. $_REQUEST['description'][$index]
    }
// ...

例如,若 formData 对象为 {example2: 'test'},则可以作为 $_REQUEST['example2'] 进行访问。