2010-11-20 18 views
5

Sto tentando di consentire più caricamenti di file prima di un post di un modulo. Quello che mi piacerebbe è che l'utente veda sempre un elemento di caricamento del file, e ogni volta che viene selezionato un file, mostra un nuovo <li> che contiene il nome file e un'immagine/link per rimuovere quel file specifico dalla raccolta. C'è un plugin jQuery MultiFile che fa ciò che voglio, ma non riesco a far funzionare lo stile personalizzato nel modo che preferisco, quindi sto facendo il mio.Caricamento file multipli con jQuery

Finora ho il seguente codice. Aggiunge con successo lo <li>, nasconde l'elemento di caricamento del file con il file appena selezionato e aggiunge un elemento di caricamento file vuoto alla pagina affinché l'utente possa selezionare un nuovo file. Sto lottando per gestire in modo appropriato la rimozione degli elementi e, anche se non è così difficile, ho continuato a guardarli abbastanza a lungo che ora mi sembra che stia sbagliando tutto. Spero che altri possano avere qualche intuizione, consigli per ripulire questo (per esempio renderlo più elegante), e così via. Codice sotto.

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

risposta

4

La risposta è la chiusura , una delle caratteristiche più potenti di JavaScript. Funzioni che si trovano all'interno degli altri are able to access the variables of the enclosing functions.

Si potrebbe vincolare il proprio funzione di eliminazione quando si aggiunge un ingresso di file invece di utilizzare .live e dinamicamente generati ID di:

$('.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 questo esempio, il gestore click per il tasto di cancellazione accede i wrapper jQuery (per la due elementi che devono essere rimossi) che sono stati ottenuti nella funzione genitore.

+0

Ah, quindi molto vicino. Quindi il problema è che, nella rimozione, non è il nuovo input che dovrebbe essere rimosso, ma quello precedente. Il nuovo è vuoto, quindi è hunky-dory. Ma quando si fa clic sull'immagine rimossa, voglio assicurarmi che l'elemento file appropriato (ora nascosto) venga rimosso dalla pagina in modo che non venga inviato con la raccolta. Questo era il ragionamento dietro l'accesso da un ID specifico. Giocherò con questo poiché l'evento click sta funzionando con il tuo suggerimento, ma se hai altre idee basate su quelle informazioni aggiunte, holler. Grazie! – nkirkes

+0

Ok, quindi ho funzionato (in Chrome, non ho testato IE o FF) aggiungendo una nuova variabile per contenere l'elemento del file principale, quindi ho cambiato 'input.remove' per essere 'parentInput.remove'. Ecco. Fantastico, amico, grazie per l'aiuto! – nkirkes

+0

Se voglio fare la stessa cosa come Mannish, selezionando più file allo stesso tempo, come faccio a visualizzarli tutti nella finestra del browser, ognuno con un rispettivo pulsante di cancellazione? – serengeti12

Problemi correlati