Przesyłanie wielu plików za pomocą jQuery

Question

Próbuję zezwolić na przesyłanie wielu plików przed postem formularza. Chciałbym, aby użytkownik widział tylko jeden element do przesyłania plików i za każdym razem, gdy plik jest zaznaczony, wyświetlał nową <li>, która zawiera nazwę pliku i obraz/link, aby usunąć ten konkretny plik z kolekcji. Istnieje wtyczka jQuery MultiFile, która robi to, co chcę, ale nie mogę uzyskać niestandardowej stylizacji, która zadziałałaby tak, jak chcę, więc sama tworzę.

Do tej pory mam poniższy kod. Pomyślnie dodaje on <li>, ukrywa element do przesyłania plików z nowo wybranym plikiem i dołącza do strony pusty element do przesyłania plików, aby użytkownik mógł wybrać nowy plik. Staram się właściwie zarządzać usuwaniem elementów i chociaż nie jest to takie trudne, patrzę na to wystarczająco długo, że teraz wydaje mi się, że robię to wszystko źle. Mam nadzieję, że inni mogą mieć wgląd, wskazówki, jak to wyczyścić (to znaczy uczynić go bardziej eleganckim) i takie. Kod poniżej.

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> 

Scenariusz:

$(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); 
    }); 
}); 

Answer 1

Odpowiedź jest zamknięcie, jeden z najmocniejszych cech JavaScript. Funkcje, które są wewnątrz innych are able to access the variables of the enclosing functions.

Można związać swoją usuwania funkcji, gdy wejście plik jest dodawany zamiast korzystania .live i dynamicznie generowanych identyfikatorów:

$('.photo-upload').live('change', function() { 
    var li = $('<li />').text($(this).val()), 
     img = $('<img src="/vh/public/images/icon-delete.png" class="delete" />'), 
     input = $(this).clone(); 

    li.append(img); 
    $('#photos').append(li); 
    $(this).parent().append(input); 
    $(this).hide(); 

    img.click(function() { 
     input.remove(); 
     li.remove(); 
    }); 
}); 

W tym przykładzie obsługi click dla przycisku kasowania uzyskuje dostęp do owijarki jQuery (dla dwa elementy, które muszą zostać usunięte), które uzyskano w funkcji macierzystej.