Jquery File Upload 添加额外的上传字段答案

【问题标题】：Jquery File Upload add extra upload fieldsJquery File Upload 添加额外的上传字段
【发布时间】：2015-12-22 10:59:33
【问题描述】：

我正在为我的上传页面使用 Jquery-File-Upload，但在添加额外的上传字段时遇到了问题。

我正在关注该页面：https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

它适用于 1 个文件提交。然而，随着多个文件的提交，我们开始看到问题，因为文件上传 1 个文件/POST (singleFileUploads: true)。

我用作参考的代码如下：

<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>

如果您使用 2 个文件提交，那么您将获得 2 个帖子：

$_REQUEST: 
(
  title:
  (
    [0] -> Title1
    [1] -> Title2
  )
)

$_FILES:
(
  [0] -> ( 'name' => 'file name 1', ... )
)

$_REQUEST: 
(
  title:
  (
    [0] -> Title1
    [1] -> Title2
  )
)

$_FILES:
(
  [0] -> ( 'name' => 'file name 2', ... )
)

那么，在php端，函数handle_form_data依赖于文件索引

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

问题是索引始终为 0，因为我们正在上传 1 个文件/帖子。现在您可以看到，由于 $_REQUEST 会上传所有文件中的所有额外字段（无论它是当前文件是什么），因此来自 $_FILES 的索引会从额外字段数组中去同步。

除了将 singleFileUploads 关闭之外，您知道任何解决方法吗？

【问题讨论】：

标签： jquery-file-upload blueimp

【解决方案1】：

好的，我会自己回答。

首先，我们将在文件添加到 UI 后立即为其赋予一个 ID。我们为此维护一个增量索引：

//global
var current_file_index = 0;

接下来，我们需要使用 fileuploadadd 回调来将该索引添加到文件中：

$('#fileupload').bind('fileuploadadd', function (e, data) {
  for (var i = 0; i < data.files.length; i++) {
    data.files[i].index = current_file_index++;
  }
});

现在在 UI 端添加文件时可以访问该索引。我们不希望将自定义输入添加到表单中，因此通过 id 更改名称（这样就不会提交）。并将全新的索引添加为该 ID 的一部分：

<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 id="title_{%=file.index%}" required></label></td>
        <!-- ... -->
    </tr>
{% } %}
</script>

然后，当我们提交文件时，我们希望将该输入的结果添加到 formData。我们不关心发送太多数据，所以我们基本上将整个文件数组作为 JSON 字符串发送：

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
  for (var i = 0; i < data.files.length; i++) {
    var title = $("title_ + data.files[i].index.toString()").val();
    data.files[i].title = title;
  }

  data.formData = {
    files_data: JSON.stringify(data.files)
  }
});

不要忘记在 $_REQUEST["files_data"] 中将数据返回到服务器端，并分解现在仅包含 1 个文件数据的 json。

【讨论】：

【解决方案2】：

我知道，为时已晚，但我使用最简单的方法：

<input type="text" name="{%=file.name%}[title]">
<input type="text" name="{%=file.name%}[description]">

然后您可以通过文件名为每个文件获取方便的数据数组，如下所示：

print_r($_POST);

/* will be:
 * Array
 * (
 *     [file1_jpg] => Array
 *         (
 *             [title] => title 1
 *             [description] => description 1
 *         )
 * 
 *     [file2_jpg] => Array
 *         (
 *             [title] => title 2
 *             [description] => description 2
 *         )
 * 
 *     [file3_png] => Array
 *         (
 *             [title] => title 3
 *             [description] => description 3
 *         )
 * 
 * )
 */

但请记住：$_POST 键中的所有点都将被替换为下划线！这个是正常的。记住它。

【讨论】：

【解决方案3】：

也迟到了，但我刚刚解决了同样的问题。

上面链接的文档中有一个关键部分是 OP 没有实现的：

$('#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();
});

添加后，输入字段的“最接近”值将添加到与表单一起提交的 formData 数组中。

【讨论】：