Прежде всего, я не FED (я концентрируюсь на архитектуре и внутреннем коде), поэтому мой JQuery не так хорош, как мог бы.Если у вас есть какие-либо предложения по улучшению моего кода, это будет приветствоваться.
Я использую плагин uploadify jQuery для загрузки изображений на мой веб-сайт.Я создал сайт, используя ASP.Net MVC3, и я использую сложные типы для форм (с шаблонами редактора).По сути, моя структура позволяет мне выводить перечисление объектов, и каждый объект имеет элемент управления uploadify, который позволяет загружать несколько файлов.Я могу показать вам этот код, если вам нужно его увидеть, но в основном я реализовал более продвинутую версию примера IEnumerable<HttpPostedFileBase> Фила Хаака здесь .
Я добавил код кСобытие onComplete для вывода нескольких дополнительных полей формы, которые позволяют мне добавлять подписи к каждому загруженному файлу, которые впоследствии автоматически связываются с правильными объектами MVC.Все это прекрасно работает, хотя я уверен, что есть более эффективные способы сделать это.
Проблема, с которой я сталкиваюсь, заключается в том, что MVC3 требует последовательного индекса, начинающегося с нуля, в соглашениях об именах для перечисляемых полей формы.для того, чтобы IEnumerable был принят методом действия.Когда я удаляю один из динамически созданных элементов управления формы (с кнопкой отмены), последовательность индексов нарушается.
Теперь - поскольку существует несколько элементов загрузки, каждый из которых должен поддерживать свой собственный индекс.Я хотел бы иметь возможность расширять каждый экземпляр плагина uploadify, чтобы иметь отслеживаемый атрибут «fileIndex», а также расширять его методом «reindexFiles ()», который будет перебирать все оставшиеся элементы управления и переименовывать и переименовывать их.
Мои методы могут быть грубыми (комментарии приветствуются!), Но вот мой код, который у меня есть на данный момент:
$(document).ready(function () {
var uploadedIndex = 0;
$('div[id$="UploadedImages"]').uploadify({
script: '/ControlPanel/Media/UploadRelatedImages',
auto: true,
fileDesc: 'Image Files (*.jpg;*.jpeg;*.gif;*.png)',
fileExt: '*.jpg;*.jpeg;*.gif;*.png',
buttonText: 'Select Images',
fileDataName: 'files',
multi: true,
removeCompleted: false,
simUploadLimit: 3,
queueSizeLimit: 100,
sizeLimit: 1048576, // 1Mb max limit
onSelectOnce: function (event, data) {
var uploader = $("#" + event.delegateTarget.id);
var mediaFormatID = uploader.closest('.mediaFormat').children('input[type="hidden"][name$="MediaFormatID"]').first().val();
var sd = {
ASPSESSID: $("#ASPSESSID").val(),
AUTHID: $("#AUTHID").val(),
mediaFormatID: mediaFormatID // The first grandparent that ends with MediaFormatID, for the hidden field
};
uploader.uploadifySettings('scriptData', sd);
// TODO : The index needs to be managed per instance
// Reset index (this will reset each time a group of images are uploaded)
uploadedIndex = 0;
},
onComplete: function (event, ID, fileObj, response, data) {
// Get the json response
var json = $.parseJSON(response)[0];
// Get the newly created queue item
var queueItem = $("#" + event.delegateTarget.id + ID);
if (json.HasError) {
// Text error in response - show it and highlight
queueItem.children('.percentage').html('<br/>' + json.ErrorMessage);
queueItem.addClass('uploadifyError');
return false;
}
var textBoxId = event.delegateTarget.id + "_" + uploadedIndex + "__Caption";
var textBoxName = event.delegateTarget.attributes['name'].value + "[" + uploadedIndex + "].Caption";
var hiddenId = event.delegateTarget.id + "_" + uploadedIndex + "__MediaFormatImageID";
var hiddenName = event.delegateTarget.attributes['name'].value + "[" + uploadedIndex + "].MediaFormatImageID";
// Create container
var container = $("<div/>").addClass('captionContainer');
// Create bound hidden field
$('<input />', {
'type': 'hidden',
'id': hiddenId,
'name': hiddenName,
'value': json.MediaFormatImageID
}).appendTo(container);
// Display the image thumb
$("<img/>", {
'src': json.ThumbnailPath
}).appendTo(container);
// Create Textbox label
$('<label />', {
'for': textBoxId
}).text('Image Caption')
.appendTo(container);
// Create bound text box
$('<input />', {
'type': 'text',
'id': textBoxId,
'name': textBoxName,
'maxlength': 100
}).appendTo(container);
// Append container to queue item
container.appendTo(queueItem);
// Increment index
uploadedIndex++;
},
onCancel: function (event, ID, fileObj, data) {
// Delete the file from the server
var uploader = $("#" + event.delegateTarget.id);
// Get image ID from created hidden input
var hiddenId = event.delegateTarget.id + "_" + uploadedIndex + "__MediaFormatImageID";
var hidden = $("#" + hiddenId);
$.ajax({
url: '/ControlPanel/Media/DeleteRelatedImage',
type: "POST",
context: uploader,
data: {
mediaFormatImageID: hidden.val()
},
success: function () {
// TODO: Reindex form images
}
});
}
});
});
Метод onCancel неполон и не проверен.Как видите, я использую глобальный индекс для имен файлов, но он не работает ни для каких экземпляров загрузки после первого, так как индекс будет начинаться с последнего сохраненного индекса, а не с 0.однако необходимо поддерживать индекс для каждого элемента uploadify, поскольку пользователь может попытаться добавить больше изображений после добавления первого пакета.
Я рассмотрел функциональность $ .extend ()JQuery, но не мог заставить ничего работать успешно.Любая помощь будет оценена, как всегда.