FineUploader多个实例和动态命名 [英] FineUploader multiple instances and dynamic naming

问题描述

我正在使用jquery包装器在MVC4项目中使用FineUploader 4.0.8. 此处是我创建的js代码的示例fineUploader的单个实例，并且工作正常.目前，我需要一个以上的fineUploader实例，但是每个单独的控件都不了解其他实例，它们会根据需要在页面上呈现(我已经看过以前使用jQuery的问题.每个，在这里不起作用).目前，我似乎无法正确呈现任何上传按钮，可能是由于ID重复或其他原因.有关如何使用MVC的Razor为该单个实例创建唯一变量和html ID的信息，请参见下文.

I am using FineUploader 4.0.8 within a MVC4 project using the jquery wrapper. Here is an example of my js code that creates a single instance of the fineUploader and is working just fine. At this time, I have the need for more than one instance of fineUploader, but each individual control doesn't know anything about the other and they're rendered as needed on a page (I've seen previous questions using a jQuery .each, which won't work here). Currently, I can't seem to correctly render any upload buttons, probably due to having an ID duplicated or something. See below for how I'm using MVC's Razor to create unique variables and html IDs for that individual instance.

这是我当前的实现，其中添加了动态值(您在其中看到_@Model.{PropertyName}的位置):

Here's my current implementation where I've added the dynamic values (places where you see _@Model.{PropertyName}):

// Uploader control setup
    var [e-mail] = $('#[e-mail]').fineUploader({
        debug: true,
        template: '[e-mail]',
        button: $("#[e-mail]"),
        request:
        {
            endpoint: '@Url.Action("UploadFile", "Survey")',
            customHeaders: { Accept: 'application/json' },
            params: {
                [e-mail]: (function () { return instance; }),
                [e-mail]: (function () { return surveyItemResultId; }),
                [e-mail]: (function () { return itemId; }),
                [e-mail]: (function () { return loopingCounter++; })
            }
        },
        validation: {
            acceptFiles: ['image/*', 'application/xls', 'application/pdf', 'text/csv', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.ms-excel'],
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png', 'bmp', 'csv', 'xls', 'xlsx', 'pdf', 'xlt', 'xltx', 'txt'],
            sizeLimit: 1024 * 1024 * 2.5, // 2.5MB
            stopOnFirstInvalidFile: false
        },
        failedUploadTextDisplay: {
            mode: 'custom'
        },
        multiple: true,
        text: {
            uploadButton: 'Select your upload file(s)'
        }
    }).on('submitted', function (event, id, filename) {
        $("#modal-overlay").fadeIn();
        $("#modal-box").fadeIn();
        [e-mail]++;
        $(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled');
    }).on('complete', function (event, id, filename, responseJSON) {
        [e-mail]++;
        if ([e-mail] == [e-mail]) {
            $(':input[type=button], :input[type=submit], :input[type=reset]').removeAttr('disabled');
            //$("#overlay").fadeOut();
            $("#modal-box").fadeOut();
            $("#modal-overlay").fadeOut();
        }
    }).on('error', function (event, id, name, errorReason, xhr) {
        //$("#overlay").fadeOut();
        alert('error: ' + errorReason);
        $("#modal-box").fadeOut();
        $("#modal-overlay").fadeOut();
    });
});

使用与上述相同的原理，我也将此逻辑添加到了模板中.

Using the same principle as above, I've added this logic to the template too.

编辑-在下面添加了整个模板:

EDIT - Added the entire template below:

 <script type="text/template" id="[e-mail]">
    <div class="qq-uploader-selector qq-uploader">
        <div class="qq-upload-drop-area-selector qq-upload-drop-area qq-hide-dropzone">
            <span>Drop files here to upload</span>
        </div>
        <div class="qq-upload-button-selector qq-upload-button">
            <div>Click here to select your upload file(s)</div>
        </div>
        <span class="qq-drop-processing-selector qq-drop-processing">
            <span>Processing dropped files...</span>
            <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
        </span>
        <ul class="qq-upload-list-selector qq-upload-list">
            <li>
                <div class="qq-progress-bar-container-selector">
                    <div class="qq-progress-bar-selector qq-progress-bar"></div>
                </div>                   
                <span class="qq-upload-file-selector qq-upload-file"></span>
                <span class="qq-upload-status-text-selector qq-upload-status-text"></span>
            </li>
        </ul>
    </div></script>

使用上面的代码时，我看到的只是拖放部分可见，而没有按钮.也没有js错误.

What I see when I use the above code is only the drag and drop section visible, and no button. There are no js errors either.

我确实有一个示例，在该示例上仅具有该控件的一个实例，并且结果是相同的可见拖放部分，并且没有按钮).有什么想法吗?如果您发现我遗漏了一些有用的信息，我们将很乐意为您更新问题.如果我可以轻松地改善或修复该问题，请不要只给我-1.

I do have an example that only has one instance of this control on it and the results are the same visible drag and drop section and no button). Any thought as to what's going on? I'll gladly update the question if you find I'm missing something helpful. Please don't just -1 me if it's something I can easily improve or fix.

推荐答案

如果您没有看到上传按钮，则模板中没有正确标记的按钮.您提供的模板中似乎就是这种情况.如果您的 actual 模板 包含正确标记的上载按钮，则您的模板在template选项中未正确引用，或者您的模板未正确呈现在您的构建Fine Uploader实例之前的页面.

If you aren't seeing an upload button, then a properly marked button is not present in your template. That seems to be the case in the template you have provided. If your actual template does contain an properly marked upload button, then your template is either not referenced correctly in the template option, or your template is not properly rendered on your page before your Fine Uploader instance is constructed.

这篇关于FineUploader多个实例和动态命名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！