【发布时间】：2014-06-03 21:28:24
【问题描述】：
我在使用 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错误。
我确实有一个示例，它上面只有一个此控件的实例，结果是相同的可见拖放部分，没有按钮）。有什么想法吗？如果您发现我遗漏了一些有用的东西，我会很乐意更新问题。如果这是我可以轻松改进或修复的问题，请不要只 -1 我。
【问题讨论】：
-
您的模板包含无效的 html（缺少几个结束标签）。此外，您的模板中未引用该按钮。
-
感谢您的浏览，但我确实说过这只是模板的一部分。明天我会将整个内容包含在编辑中。谢谢。
-
当您要求解释奇怪的行为时，请不要在您的问题中包含无效的 HTML 或任何无效的代码。
-
更新了模板，现在显示了整个内容。谢谢！
标签： jquery upload multiple-instances fine-uploader