Загрузка нескольких файлов с помощью jQuery
Я пытаюсь разрешить загрузку нескольких файлов до сформировать сообщение. Я бы хотел, чтобы пользователь видел только один элемент загрузки файла, и каждый раз, когда файл выбирается, показывал новый , который содержит имя файла и изображение / ссылку для удаления этого конкретный файл из коллекции. Есть плагин jQuery MultiFile, который делает то, что я хочу, но я не могу заставить настраиваемый стиль работать так, как я хочу, поэтому я использую свой собственный.
Пока что у меня есть код ниже. Он успешно добавляет , скрывает элемент загрузки файла с новым выбранным файлом и добавляет пустой элемент загрузки файла на страницу, чтобы пользователь мог выбрать новый файл. Я изо всех сил пытаюсь правильно управлять удалением элементов, и, хотя это не так уж сложно, я смотрел на это достаточно долго, и теперь мне кажется, что я все делаю неправильно. Я надеюсь, что у других может быть какое-то понимание, советы, как убрать это (то есть сделать его более элегантным) и т. Д. Код ниже.
HTML:
<div id="product-image-area" class="group" style="border-bottom: none; padding-top: 0">
<ul id="photos" class="nobull">
<li id="no-product-images-msg" class="" >
<%= Html.Image("no-photos.png") %>
</li>
</ul>
</div>
<div id="upload-area">
<h4 class="st">Upload an image</h4>
<p class="note">Allowed file types are .gif, .jpg, .jpeg, and .png</p>
<p id="file-input" class="st sb"><input class="photo-upload" id="VenuePhotos_0" name="VenuePhotos[]" type="file" /></p>
</div>
Скрипт:
$(function () {
$('.photo-upload').live('change', function () {
var fileCount = new Number($(this).parent().children('.photo-upload').length);
$('#photos').append('<li id="venue_photo_' + (fileCount - 1) + '">' + $(this).val() + '<img title="' + (fileCount - 1) + '" src="/vh/public/images/icon-delete.png" class="delete" /></li>');
$(this).parent().append(
$(this).clone().attr('id', 'VenuePhotos_' + fileCount)
);
$(this).hide();
});
$('.delete').live('click', function (e) {
var index = $(e).attr('title');
$('#file-input').children('.photo-upload').remove('#VenuePhotos_' + index);
$('#photos').children().remove('#venue_photo_' + index);
});
});