Witam, mój problem polega w sumie nie wiem czy na dopasowaniu CSS czy na jakieś kwestii JS, lecz jednak postanowiłem to wrzucić do tego działu. Chodzi o to, że Chciałem stworzyć coś co będzie jak multi upload. Czyli formularz z możliwością dodawania wielu zdjęć, ale mam mały problem. Przedstawie to dla zilustrowania:



Jak widać pierwsze "okno" jest ok. Kolejne już tworzy się jedno w drugim. Nie umiem tego poprawić. Znalazłem miejsce gdzie tworzy sie ten kod drugiego inputa i wyglada jakby to bylo tu
Kod
<span class="input-group-addon btn btn-default btn-file">

lecz może to tylko blad cssa

w warunku
  1. var newIn = '<div class="fileinput fileinput-new input-group" data-provides="fileinput"><div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div><span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" id="upload1" name="obraz1"></span><button id="b1" class="add-more-upload btn btn-success btn-xs pull-right " type="button">Dodaj obrazek</button></div>';

juz sam nie wiem prosze o porade co jest nie tak robione?

i takie dodatkowe pytanie, jesli robie upload ta metoda to lepiej zapisywac potem dodawane dane w name =nazwa1,nazwa2,nazwa3 ..itp czy w tablicy? ta druga opcja wydaje mi sie lepsza ale prosze o opinie

  1. <label class="col-sm-3 control-label" >Zdjęcie wiele plikow?</label>
  2.  
  3. <div class="controls col-sm-9"" id="profs">
  4.  
  5. <input type="hidden" name="count2" value="1" />
  6. <div id="upload">
  7. <div class="fileinput fileinput-new input-group" data-provides="fileinput">
  8. <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
  9. <span class="input-group-addon btn btn-default btn-file">
  10.  
  11. <span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span>
  12.  
  13.  
  14.  
  15. <input type="file" id="upload1" name="obraz1">
  16. </span>
  17. <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  18. <button id="b1" class="add-more-upload btn btn-success btn-xs pull-right " type="button">Dodaj obrazek</button>
  19.  
  20. </div>
  21. </div>
  22.  
  23. </div>


  1. /* dynamiczne upload */
  2. $(document).ready(function(){
  3.  
  4. $( "#form" ).keypress(function(e) {
  5. if ( e.which == 13 ) {
  6. e.preventDefault();
  7. }
  8. });
  9.  
  10. var next = 1;
  11. $(".add-more-upload").click(function(e){
  12. e.preventDefault();
  13. var addto = "#upload" + next;
  14. var addRemove = "#upload" + (next);
  15. next = next + 1;
  16.  
  17. var newIn = '<div class="fileinput fileinput-new input-group" data-provides="fileinput"><div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div><span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" id="upload1" name="obraz1"></span><button id="b1" class="add-more-upload btn btn-success btn-xs pull-right " type="button">Dodaj obrazek</button></div>';
  18.  
  19. var newInput = $(newIn);
  20. var removeBtn = '<button id="remove' + (next - 1) + '" class="remove-me-upload btn btn-danger btn-xs pull-right marg marg2 " >Usuń upka</button>';
  21. var removeButton = $(removeBtn);
  22. $(addto).after(newInput);
  23. $(addRemove).after(removeButton);
  24. $("#upload" + next).attr('data-source',$(addto).attr('data-source'));
  25. $("#countx").val(next);
  26.  
  27. $('.remove-me-upload').click(function(e){
  28. e.preventDefault();
  29. var fieldNum = this.id.charAt(this.id.length-1);
  30. var fieldNum = this.id.substr(this.id.lastIndexOf("e")+1);
  31. var fieldID = "#upload" + fieldNum;
  32. $(this).remove();
  33. $(fieldID).remove();
  34. });
  35. });
  36.  
  37.  
  38.  
  39. });


  1. $(addto).after(newInput);

wydaje mi sie ze blad jest na tym poziomie tylko zmiana na np appendTo nie pomaga pomzoe ktos z tym?