Question

我尝试使用ASP.NET MVC 3的jquery文件上传插件示例。我已经更改了上传模板，它显示了输入字段和每个文件的复选框（用户可以为每个选定的文件设置一些数据）。现在，当用户决定上传文件时，我不仅需要获取插件提供的数据（文件名，文件URL，文件大小），还需要输入来自输入和复选框的数据。但是，当用户上传许多文件时，我不知道如何获取值，因为如果我为这些字段指定了ID，则每个输入和每个复选框都会有相同的ID，因此它无法正常工作。如果我为这些字段提供相同的类，我可以按类获取元素并遍历这些字段，但我不知道哪个迭代引用哪个文件。我把隐藏的输入放在表格中，当文件上传时发送，但我不知道如何从upload-template中的每个输入中获取数据以通过表单发送。

有一个代码用于显示添加到队列但尚未上传的每个文件。

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    {% var nodeName = file.name.substring(0, file.name.length - 4); %}
    <tr class="template-upload fade">
        **<td><input id="setNodeName" value="{%=nodeName%}" type="text" class="form-control nodename" /></td>**
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
            <td>
                <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
            </td>
            <td class="start">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>{%=locale.fileupload.cancel%}</span>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>

然后有文件上传时发送的表格。我在这里添加了隐藏的输入来存储来自用户的数据（具有id setNodeName的输入文件）：

<form id="fileupload" action="@Url.Action("UploadFiles")" method="POST" enctype="multipart/form-data">
    **<input type="hidden" id="nodename" value="" />**
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                <button type="submit" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="icon-trash icon-white"></i>
                    <span>Delete</span>
                </button>
                <input type="checkbox" class="toggle">
            </div>
            <div class="span5">
                <!-- The global progress bar -->
                <div class="progress progress-success progress-striped active fade">
                    <div class="bar" style="width:0%;"></div>
                </div>
            </div>
        </div>
        <!-- The loading indicator is shown during image processing -->
        <div class="fileupload-loading"></div>
        <br>
        <!-- The table listing the files available for upload/download -->
        <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
    </form>

在上传文件之前调用的函数中，我想将数据从upload-template中的输入传输到表单中的隐藏输入。正如我所说，我试图通过id调用它，但是当有多个文件时，我有几个具有相同id的输入，因此它不起作用。我也尝试按类获取元素（我将setnodename id更改为setnodename类）并且我有一些输入来自用户的数据但是我不知道我应该使用哪些输入，因为jquery中的文件插件没有索引值。因此，对于每个上传的文件，我有一个输入数组（输入数等于添加的文件数）但我不知道哪个数组元素对于此刻上传的文件有效。

Answer 1

我认为你应该看看documentation of plugin about sending additional parameters with file。您需要做的是在'fileupload submit'上添加事件处理程序，它将在上传之前触发每个文件：

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    var inputs = data.context.find(':input');
    data.formData = inputs.serializeArray();
})

从jquery文件上传插件中的upload-template获取数据

1 个答案: