Mehrere Datei-Upload mit jQuery

Question

Ich versuche, mehrere Datei-Uploads vor einem Formular Post zu ermöglichen. Ich möchte, dass der Benutzer immer nur ein Datei-Upload-Element sieht und jedes Mal, wenn eine Datei ausgewählt wird, ein neues <li> anzeigen, das den Dateinamen und ein Bild/einen Link enthält, um diese bestimmte Datei aus der Sammlung zu entfernen. Es gibt ein jQuery MultiFile-Plugin, das genau das tut, was ich will, aber ich kann nicht erreichen, dass der benutzerdefinierte Stil so funktioniert, wie ich es möchte, also rolle ich meinen eigenen.

Bisher habe ich den folgenden Code. Es fügt erfolgreich die <li> hinzu, verbirgt das Datei-Upload-Element mit der neu ausgewählten Datei und fügt ein leeres Datei-Upload-Element an die Seite an, damit der Benutzer eine neue Datei auswählen kann. Ich bemühe mich, die Entfernung der Elemente angemessen zu handhaben, und obwohl es nicht so schwierig ist, habe ich das lange genug angeguckt, jetzt fühlt es sich an, als würde ich alles falsch machen. Ich hoffe, dass andere einen Einblick haben, Tipps, um dies aufzuräumen (d. H. Es eleganter zu machen), und so weiter. Code unten.

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> 

Script:

$(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

Die Antwort ist die Schließung, einer der mächtigsten Funktionen von JavaScript. Funktionen, die sich in anderen befinden are able to access the variables of the enclosing functions.

Sie könnten Ihre Löschfunktion binden, wenn eine Eingabedatei hinzugefügt wird stattdessen .live die Verwendung und dynamisch-IDs generiert:

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

In diesem Beispiel ist die click Handler für die Schaltfläche Löschen greifen auf den jQuery-Wrapper (für die zwei Elemente, die entfernt werden müssen), die in der Elternfunktion erhalten wurden.