jquery-file-upload - Jquery 文件上传添加额外的上传字段

Question

我正在为我的上传页面使用 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 个帖子:

1/

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

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

2/

$_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 关闭之外，您知道任何解决方法吗？

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