[jquery] Wie kann ich Dateiuploads dynamisch hinzufügen?

Question

Ich möchte mehrere Dateien hochladen, daher möchte ich Upload-Felder dynamisch über jquery hinzufügen. Jetzt kann ich es tun, wenn ich eine Schaltfläche wie "ein anderes Feld hinzufügen" habe und den neuen Upload an das Formular anhefte, aber ich möchte es etwas anders machen.

Zunächst sollte das Formular ein Eingabefeld haben, nachdem der Benutzer eine Datei zum Hochladen ausgewählt hat, möchte ich sofort ein weiteres Hochladefeld hinzufügen. Irgendwelche Ideen, wie man das macht?

Answer 1

Das input Element hat ein change Ereignis, wenn die Formularfeldänderungen gefeuert wird. Also:

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

Das delegate verwendet, was bedeutet, Sie müssen nicht explizit auf das neue Element das Ereignis haken.

Live example(Ich gehe davon aus Ihrem Markup ein wenig interessant   — wäre und sicherlich besser aussehenden   — als dort gezeigt)

aktualisieren: Leider change nicht sofort auf einigen Browsern abfeuert (Es wartet, bis der Benutzer den Fokus beispielsweise vom Feld auf IE7 entfernt). jQuery behandelt diese Seltsamkeit für Sie, wenn Sie das Ereignis direkt anhängen, aber nicht, wenn Sie delegate verwenden. Also hier ist eine Alternative:

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

Wenn Ihr Markup komplexer als nur die input selbst (und ich nehme an, es ist), müssen Sie sicher sein, Sie change auf dem richtigen Element sind Einhaken.

Live example

Answer 2

Sie könnten so etwas versuchen.

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