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变为OFF之外，您知道任何解决方法吗？

Answer 1

好的，我会自己回答。

首先，我们会在将文件添加到用户界面后将其归属于文件。我们维持一个增量指数：

//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 [＆＃34; files_data＆＃34;]中获取服务器端的数据，然后展开现在只包含1个文件数据的json。

Answer 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键中的所有点都将替换为下划线！这个是正常的。记住它。

Answer 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数组中。

更多详情请见：https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data#setting-formdata-on-upload-start-for-each-individual-file-upload

Jquery文件上载添加额外的上传字段

3 个答案: