[jquery] Jak mogę dynamicznie dodawać przesyłane pliki?

Question

Chcę przesłać wiele plików, więc chcę dodać pola przesyłania dynamicznie przez jquery. Teraz mogę to zrobić, jeśli mam przycisk "dodaj kolejne pole" i dołącz nowe przesłanie do formularza, ale chcę zrobić to trochę inaczej.

Początkowo formularz powinien mieć jedno pole wprowadzania, po tym jak użytkownik wybierze plik do przesłania Chcę od razu dodać kolejne pole przesyłania. Wszelkie pomysły, jak to zrobić?

Answer 1

Element input ma change zdarzenie, które zostanie zwolniony, gdy zmiany pól formularza. Więc:

$('selector_for_your_form').delegate('input[type=file]', 'change', function() { 
    var form = $(this).closest('form'); 
    form.append(/* ... markup for the new field ... */); 
}); 

który wykorzystuje delegate, co oznacza, że ​​nie trzeba jawnie zahaczyć zdarzenie na nowym elemencie.

Live example(zakładam swoją markup byłby nieco bardziej interesujący   — i na pewno lepiej wyglądające   — niż pokazano tam)

Aktualizacja: Niestety, nie change ogień natychmiast na niektórych przeglądarkach (oczekuje na to, że użytkownik na przykład odwróci uwagę od pola na IE7). jQuery radzi sobie z tym dziwactwem, jeśli podłączysz wydarzenie bezpośrednio, ale nie, jeśli użyjesz delegate. Więc oto alternatywny:

$('selector_for_your_form input[type=file]').change(fileChangeHandler); 
function fileChangeHandler() { 
    var form = $(this).closest('form'); 
    $('<input type="file">').change(fileChangeHandler).appendTo(form); 
} 

Jeśli znaczniki są bardziej złożone niż tylko samego input (i zakładam, że jest), musisz mieć pewność, że zaczepiając change po prawej elementu.

Live example

Answer 2

Możesz spróbować czegoś takiego.

<input type="file" name="file" onChange="if ($(this).val() != '' {addNewfileInput();}">