将标题字段添加到 Jquery 文件上传？答案

【问题标题】：Adding Title field to Jquery File Upload?将标题字段添加到 Jquery 文件上传？
【发布时间】：2013-12-31 20:41:37
【问题描述】：

使用 Jquery File Upload 我想为每个上传的文件添加一个标题字段。这样，一旦上传了文件，就会在每个文件下方添加一个标题文本框。

在上传开始时为每个单独的文件上传设置 formData 部分似乎是我想要做的，但我不确定该放在哪里。

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

尝试将其添加到 html 中，但没有执行任何操作。

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

谢谢

【问题讨论】：

标签： jquery jquery-file-upload

【解决方案1】：

不是文档描述的方式，但似乎有效。添加了这一行。

.append('<br /><strong>Photo Description</strong>: <input type="text" name="title[]" value="">');

到本节

 .on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#files');
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
    if (file.preview) {
        var node = $('<p/>')
        .append($('<span/>').text(file.name))
        .append('<br /><strong>Description</strong>: <input type="text" name="title[]" value="">');
        node.appendTo(data.context);

        node = $(data.context.children()[index]);
        node
            .prepend('<br>')
            .prepend(file.preview);
    }
    if (file.error) {
        alert(file.error);
    }
    if (index + 1 === data.files.length) {
        data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
    }
})

【讨论】：

【解决方案2】：

尽管这是一篇旧帖子，但我在jQuery-File-Upload documentation 中找到了多种向上传文件添加更多数据的方法，我首选的解决方案是您可以在模板脚本中向单个上传文件添加字段。例如：

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

然后像这样提交数据：

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

【讨论】：