我在使用jquery包装器的MVC4项目中使用FineUploader 4.0.8。 Here是我的js代码的一个例子，它创建了一个fineUploader的单个实例，并且工作得很好。此时，我需要一个以上的fineUploader实例，但是每个单独的控件都不知道关于另一个的任何内容，并且它们会在页面上根据需要进行渲染（我之前见过）使用jQuery .each的问题，这在这里不起作用）。目前，我似乎无法正确呈现任何上传按钮，可能是由于ID重复或其他原因。请参阅下文，了解我如何使用MVC的Razor为该单个实例创建唯一变量和html ID。
这是我目前的实施情况，其中我添加了动态值（您看到_@Model.{PropertyName}的位置）：
// Uploader control setup
var fineuploader_@Model.SurveyItemId = $('#files-upload_@Model.SurveyItemId').fineUploader({
debug: true,
template: 'qq-template_@Model.SurveyItemId',
button: $("#button_@Model.SurveyItemId"),
request:
{
endpoint: '@Url.Action("UploadFile", "Survey")',
customHeaders: { Accept: 'application/json' },
params: {
surveyInstanceId_@Model.SurveyItemId: (function () { return instance; }),
surveyItemResultId_@Model.SurveyItemId: (function () { return surveyItemResultId; }),
itemId_@Model.SurveyItemId: (function () { return itemId; }),
loopingIndex_@Model.SurveyItemId: (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();
filesToUpload_@Model.SurveyItemId++;
$(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled');
}).on('complete', function (event, id, filename, responseJSON) {
uploadedFileCounter_@Model.SurveyItemId++;
if (filesToUpload_@Model.SurveyItemId == uploadedFileCounter_@Model.SurveyItemId) {
$(':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();
});
});
使用与上述相同的原理，我也将此逻辑添加到模板中。
编辑 - 添加了以下整个模板：
<script type="text/template" id="qq-template_@Model.SurveyItemId">
<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错误。
我有一个例子，它只有一个这个控件的实例，结果是相同的可见拖放部分，没有按钮）。有没有想过会发生什么？如果您发现我遗漏了一些有用的内容，我将很乐意更新您的问题。如果我能轻易改进或修复它，请不要只是我。
答案 0 :(得分：1)
如果您没有看到上传按钮，则模板中不会显示正确标记的按钮。您提供的模板中似乎就是这种情况。如果您的实际模板 包含正确标记的上传按钮，那么您的模板在template选项中未正确引用，或者您的模板未正确呈现在构建Fine Uploader实例之前在您的页面上。
答案 1 :(得分：0)
以下是我目前正在为上传控件的多重实现做的事情：
我有一些其他地方列出的div包含＆＃39; Loading＆＃39;文本（ID：模态框，模态覆盖）。它们根据需要上传的文件数量显示，并在完成后消失。让用户不要一遍又一遍地点击，你知道那是怎么回事......
JS：
var fineuploader_@Model.SurveyItemId = $('#files-upload_@Model.SurveyItemId').fineUploader({
debug: true,
template: 'qq-template_@Model.SurveyItemId',
button: $("#uploadButton_@Model.SurveyItemId"),
request:
{
endpoint: '@Url.Action("UploadFile", "Survey")',
customHeaders: { Accept: 'application/json' },
params: {
surveyInstanceId: (function () { return instance_@Model.SurveyItemId; }),
surveyItemResultId: (function () { return surveyItemResultId_@Model.SurveyItemId; }),
itemId: (function () { return itemId_@Model.SurveyItemId; }),
loopingIndex: (function () { return loopingCounter_@Model.SurveyItemId++; })
}
},
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_@Model.SurveyItemId: 'Select your upload file(s)'
}
}).on('submitted', function (event, id, filename) {
$("#modal-overlay").fadeIn();
$("#modal-box").fadeIn();
filesToUpload_@Model.SurveyItemId++;
$(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled');
}).on('complete', function (event, id, filename, responseJSON) {
uploadedFileCounter_@Model.SurveyItemId++;
if (filesToUpload_@Model.SurveyItemId == uploadedFileCounter_@Model.SurveyItemId) {
$(':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();
});
});
HTML： 我为大多数DIV添加了动态ID，但我并不确定它是否重要。当我拖放时，所有实例都会显示拖放区域，因为悬停会按类更改div。这对我来说不是什么大问题，但期待这一点。
<script type="text/template" id="qq-template_@Model.SurveyItemId">
<div id="container_@Model.SurveyItemId" class="qq-uploader-selector qq-uploader">
<div id="droparea_@Model.SurveyItemId" class="qq-upload-drop-area-selector qq-upload-drop-area" **qq-hide-dropzone**>
<span>Drop files here to upload</span>
</div>
<div id="uploadButton_@Model.SurveyItemId" class="qq-upload-button-selector qq-upload-button">
<div>Click here to select your upload file(s)</div>
</div>
<span id="processing_@Model.SurveyItemId" class="qq-drop-processing-selector qq-drop-processing">
<span>Processing dropped files...</span>
<span id="spinner_@Model.SurveyItemId" class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
</span>
<ul id="list_@Model.SurveyItemId" class="qq-upload-list-selector qq-upload-list">
<li>
<div id="listprogress_@Model.SurveyItemId" 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>