在jquery文件上传插件中从上传模板获取数据

本文关键字：数据 获取 插件 jquery 文件 | 更新日期: 2023-09-27 18:05:43

我尝试使用ASP。NET MVC 3的jquery文件上传插件示例。我修改了upload-template，使其为每个文件显示一个输入文件和一个复选框(用户可以为每个选择的文件设置一些数据)。现在当用户决定上传文件时，我不仅需要得到插件提供的数据(文件名，文件url，文件大小)，还需要从输入和复选框中获取数据。但我不知道如何在用户上传很多文件时获取值，因为如果我给这些字段一个id每个输入和每个复选框都会有相同的id，这行不通。如果我为这些字段提供相同的类，我可以按类获取元素并遍历这些字段，但我不知道哪个迭代指向哪个文件。我把隐藏的输入在表单这是发送时文件上传，但我不知道如何从每个输入在上传模板通过表单发送数据。

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

<!-- 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中的输入传输到form中的隐藏输入。就像我说的，我试着通过id来调用它，但是当有多个文件时，我有几个具有相同id的输入，所以它不起作用。我还试图通过类获得元素(我将setnodename id更改为setnodename类)，我有几个来自用户的数据输入，但我不知道我应该使用这些输入中的哪一个，因为jquery插件中的文件没有索引值。因此，对于每个上传的文件，我有一个输入数组(输入计数等于添加的文件计数)，但我不知道哪个数组元素对当前上传的文件有效

在jquery文件上传插件中从上传模板获取数据

我认为你应该看看插件的文档关于发送额外的参数与文件。你需要做的是在'fileuploadsubmit'上添加事件处理程序，它将在每个文件上传之前触发:

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