"Multiple files uploader"
Bootstrap 3.3.0 Snippet by bacigalupe

<div class="col-md-12"> <div class="row"> <div class="control-group" id="fields"> <label class="control-label" for="field1"> Nice Multiple Form Fields </label> <div class="controls"> <div class="entry input-group col-xs-3"> <input class="btn btn-primary" name="fields[]" type="file"> <span class="input-group-btn"> <button class="btn btn-success btn-add" type="button"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> </div> </div> </div> </div>
.entry:not(:first-of-type) { margin-top: 10px; } .glyphicon { font-size: 12px; }
$(function() { $(document).on('click', '.btn-add', function(e) { e.preventDefault(); var controlForm = $('.controls:first'), currentEntry = $(this).parents('.entry:first'), newEntry = $(currentEntry.clone()).appendTo(controlForm); newEntry.find('input').val(''); controlForm.find('.entry:not(:last) .btn-add') .removeClass('btn-add').addClass('btn-remove') .removeClass('btn-success').addClass('btn-danger') .html('<span class="glyphicon glyphicon-minus"></span>'); }).on('click', '.btn-remove', function(e) { $(this).parents('.entry:first').remove(); e.preventDefault(); return false; }); });

Questions / Comments:

Related: See More