Я использую FineUploader 4.0.8 в проекте MVC4, используя оболочку jquery. Вот пример моего кода js, который создает один экземпляр FineUploader и работает нормально. В настоящее время мне нужно более одного экземпляра FineUploader, но каждый отдельный элемент управления ничего не знает о другом, и они отображаются на странице по мере необходимости (я видел предыдущие вопросы с использованием jQuery .each , что здесь не сработает). В настоящее время я не могу правильно отобразить какие-либо кнопки загрузки, возможно, из-за дублирования идентификатора или чего-то еще. Ниже показано, как я использую MVC Razor для создания уникальных переменных и идентификаторов html для этого отдельного экземпляра.
Вот моя текущая реализация, в которую я добавил динамические значения (места, где вы видите _@Model.{PropertyName}):
// Uploader control setup
var [email protected] = $('#[email protected]').fineUploader({
debug: true,
template: '[email protected]',
button: $("#[email protected]"),
request:
{
endpoint: '@Url.Action("UploadFile", "Survey")',
customHeaders: { Accept: 'application/json' },
params: {
[email protected]: (function () { return instance; }),
[email protected]: (function () { return surveyItemResultId; }),
[email protected]: (function () { return itemId; }),
[email protected]: (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();
[email protected]++;
$(':input[type=button], :input[type=submit], :input[type=reset]').attr('disabled', 'disabled');
}).on('complete', function (event, id, filename, responseJSON) {
[email protected]++;
if ([email protected] == [email protected]) {
$(':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();
});
});
Используя тот же принцип, что и выше, я добавил эту логику и в шаблон.
EDIT – добавлен весь шаблон ниже:
<script type="text/template" id="[email protected]">
<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, если это то, что я могу легко улучшить или исправить.
