Question

使用Jquery文件上传我想为上传的每个文件添加标题字段。因此，一旦文件上传，就会在每个文件下面添加一个标题文本框。

为每个单独的文件上传设置上传开始时的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>

由于

Answer 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);
    }
})

Answer 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();
});

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

2 个答案: