Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][HTML] Dynamiczne tworzenie <li> i przypisywanie podglądu wybranych obrazów
Forum PHP.pl > Forum > Przedszkole
followc
Witam,

próbuję, korzystając z File API, stworzyć kod, który dynamicznie będzie tworzył nowe <li> i dodawał do nich wgrywane obrazki na podglądzie. Idzie nieźle, bo faktycznie tworzone są pozycje listy z ID z kolejnymi numerami, dodawane są też do podglądu obrazy, ale... wszystkie do ostatniej pozycji <li>. Ma to zapewne związek z faktem iż onload odbywa się na po zakończeniu działań, próbowałem więc też z zonprogress, ale wciąż bez sukcesu. Jak powinienem podejść do problemu?


  1. function init(){
  2. var bHaveFileApi = (window.File && window.FileReader);
  3.  
  4. if(!bHaveFileApi){
  5. alert('Ta przeglądarka nie wspołpracuje z File API. Prosimy o uaktualnienie przeglądarki');
  6. return;
  7. }
  8.  
  9. document.getElementById("dodawanie_galerii").addEventListener("change", onFileChanged)
  10. }
  11.  
  12. function onFileChanged(theEvt){
  13. var files = theEvt.target.files;
  14. var totalBytes = 0;
  15.  
  16. for(var i = 0; i< files.length; i++){
  17. if(files[i].type.match("image.*")){
  18. var fileInfo = "<li id='podglad_galerii_li"+i+"'>" + files[i].name + "</li>";
  19. document.getElementById('podlad_galerii_ul').innerHTML += fileInfo;
  20.  
  21. var reader = new FileReader();
  22.  
  23. reader.onload = function(evt){
  24. var resultdata = evt.target.result;
  25.  
  26. var img = new Image();
  27. img.src = event.target.result;
  28. j= i -1;
  29. var id = 'podglad_galerii_li'+j;
  30.  
  31. document.getElementById(id).appendChild(img);
  32. }
  33.  
  34. reader.readAsDataURL(files[i]);
  35. }
  36.  
  37. }
  38.  
  39. }
  40.  
  41.  
  42. window.addEventListener("load",init);
  43.  


maviozo
Może po prostu sprawdzaj z jakimś interwałem, czy wszystko się załadowało czy nie?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.