Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [Javascript] Wczytanie pliku do tablicy
bAb1k
post
Post #1





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 12.10.2012

Ostrzeżenie: (0%)
-----

Witam serdecznie.
Jestem jeszcze niezłym laikiem w JacaScript'cie, ale ogólne definicje programowania są mi znane.

Może wkleję na start jakiś fragment kodu, który by coś "zapoczątkował w temacie", a później opiszę o co mi chodzi:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html lang='pl'>
  3. 	<head>
  4. 		<title>Pliki z cenami</title>
  5. 		<meta charset='utf-8' />
  6. 	</head>
  7. 	<body>	
  8. 		<input type='file' id='plik' />
  9.                 <button id='przycisk'>Kliknij</button>
  10. 		<div id='wynik'></div>	
  11.  
  12. 		<script>
  13.  
  14. 			function Czytaj()
  15. 			{
  16. 				document.getElementById('wynik').innerHTML = 'cos sie dzieje';
  17. 			}
  18.  
  19. 			document.querySelector('#przycisk').onClick = Czytaj;
  20.  
  21. 		</script>		
  22. 	</body>
  23. </html>
[HTML] pobierz, plaintext


Jeszcze na wstępie chciałbym napisać, że nie oczekuję gotowców, chciałbym zrozumieć co piszę, abym nie musiał się upominać kolejnymi postami, czy tematami (IMG:style_emoticons/default/smile.gif)

A zatem: Chciałbym wczytać po przez Input 'file' i (najlepiej) od razu załadować plik (o tym za moment), albo dopiero po naciśnięciu button'a. Aktywowałoby to funkcję Czytaj() która by dany plik wczytała i rozłożyła na tablicę (jedna linijka to jeden indeks w tablicy) oraz oczywiście wyświetlenie tych linijek w jakimś div'ie albo czymkolwiek (IMG:style_emoticons/default/wink.gif) .

Z góry dziękuję za pomoc (IMG:style_emoticons/default/wink.gif)

[Dalsze czytanie na własną rękę (IMG:style_emoticons/default/haha.gif) ]

Rzecz jasna, później chcę zrobić możliwość edycji danego fragmentu tekstu oraz na koniec funkcję, która by zapisała ten plik (już edytowany) - zatem można się spodziewać również takich pytań/tematów, ale jednak chcę na start zrobić podstawę.

W C# zrobiłbym po prostu wczytanie pliku, przypisanie do zmiennej typu string i splitowanie do tablicy znakiem ENTER (\n - jak się nie mylę?) - no ale w JS to wygląda chyba jakoś inaczej, bo nie mogłem nawet odczytać tego pliku (IMG:style_emoticons/default/wink.gif)

Ten post edytował bAb1k 27.05.2015, 11:48:35
Go to the top of the page
+Quote Post
Comandeer
post
Post #2





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Musisz skorzystać z FileReader: https://developer.mozilla.org/en-US/docs/Web/API/FileReader
A jak już odczytasz to faktycznie split po znaku nowej linii powinien starczyć
Go to the top of the page
+Quote Post
bAb1k
post
Post #3





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 12.10.2012

Ostrzeżenie: (0%)
-----

Niestety, ale jakoś mi to nie idzie zupełnie ;/. 


[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html lang='pl'>
  3. 	<head>
  4. 		<title>Pliki z cenami</title>
  5. 		<meta charset='utf-8' />
  6.  
  7. 	</head>
  8. 	<body>
  9.  
  10. 		<input type='file' id='plik' onchange='Otworz()'/>
  11. 		<br><br>
  12. 		<div id='wynik'>BRAK</div>
  13.  
  14. 		<script>		
  15. 			var Otworz = function()
  16. 			{
  17. 				var plik = document.getElementById('plik');
  18. 				var fileReader = new FileReader();
  19.  
  20. 				fileReader.readAsText(plik);
  21. 				alert(fileReader);	
  22. 			}		
  23. 		</script>
  24. 	</body>
  25. </html>
[HTML] pobierz, plaintext


No i nic ... nie możesz przeczytać pliku. Wiem, może dla was to banalne, ale w JS się serio gubię ;/.
Go to the top of the page
+Quote Post
Comandeer
post
Post #4





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

No to tak:
  • Pole to pole. A Ty chcesz plik, który jest połączony z tym polem. To jednak ciut co innego (IMG:style_emoticons/default/wink.gif)
  • JS to asynchroniczność, asynchroniczność i jeszcze raz eventy (IMG:style_emoticons/default/wink.gif) Owszem, Twój kod plik odczytuje, ale… nic nie robisz z tym faktem. To, że każesz skryptowi czytać to za mało. Musisz sobie poczekać na dane, które FileReader rzuca jako event
  • Warto też poczytać o addEventListener


Wychodzi ostatecznie coś takiego: http://jsfiddle.net/Comandeer/LzpL1t9p/

Asynchroniczność i eventy = podstawa JS
Go to the top of the page
+Quote Post
bAb1k
post
Post #5





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 12.10.2012

Ostrzeżenie: (0%)
-----

Po wielkich trudach i literówkach (nie lubię kopiować) zaczeło coś wyświetlać. Dzięki wielkie za komentarze, jednak chciałbym się dopytać czy dobrze rozumiem:

Cytat
function(e){ // jakiś kod}


Jest to "indywidualna" funkcja wewnątrz zdarzenia, gdzie argument 'e' oznacza wartość inputa? ( - pytanie czy chodzi o "value" czy nie? a jak nie to o co...) I odwołując się do 'this' mamy na myśli właśnie to 'e'?


Cytat
fileReader.readAsText(file); //każemy mu odczytać nasz plik
jak mam rozumieć owy komentarz? Odczytuje plik w jakiej formie? (może też proste pytania, ale są wątpliwości...)

Samą metodę 'addEventListener' już widziałem - tylko muszę się z nią oswoić i biegnę już do dokumentacji nim zacznę cokolwiek więcej działać (IMG:style_emoticons/default/wink.gif) . Na temat pierwszego parametru 'change' - wszystko jasne - nie ma wątpliwości, a parametr true/false też już rozumiem (IMG:style_emoticons/default/wink.gif) .
Go to the top of the page
+Quote Post
Comandeer
post
Post #6





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Cytat
Jest to "indywidualna" funkcja wewnątrz zdarzenia, gdzie argument 'e' oznacza wartość inputa?

Nie, e oznacza zdarzenie, jakie zaszło (a nie miejsce, w którym zaszło). Pomocne zwłaszcza przy zdarzeniach związanych z klawiaturą czy myszką (gdzie umożliwia pobranie klawisza/przycisku). Samo miejsce zdarzenia to własność e.target
Natomiast this oznacza input jako cały (zatem nie tylko wartość, która jest własnością tego obiektu - this.value) i na którym zaszło zdarzenie e. this oznacza element, do którego przypięliśmy zdarzenie (w naszym przypadku #plik).
Warto też zauważyć, że niekoniecznie zachodzi równość this === e.target, ale to może temat na inny raz (IMG:style_emoticons/default/wink.gif)

Cytat
jak mam rozumieć owy komentarz? Odczytuje plik w jakiej formie?

Jako tekst, więc rzutuje go na typ string.
Go to the top of the page
+Quote Post
bAb1k
post
Post #7





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 12.10.2012

Ostrzeżenie: (0%)
-----

Jeszcze Cię tutaj zapewne pomęczę (jeżeli nie masz nic przeciwko). Plus taki, że zaczyna mi się powoli wszystko układać w jedną całośc (IMG:style_emoticons/default/wink.gif) . Minus taki, że mam kolejne pytania:


Cytat
var file = this.files[0]
I rozumiem tą linijkę na dwa sposoby.
a) Skoro 'this' oznacza input'a (czyli pewnie "tego inputa" na którym zaszło zdarzenie, to czy tablica plików oznacza, że dany input może mieć w tablicy kilka takich dokumentów/plików/etc. ?
(IMG:style_emoticons/default/cool.gif) Rozumiem też tak, że w dokumencie może być kilka 'inputów' a my pobieramy wartość z tego pierwszego [0].

Cytat
fileReader.readAsText(file);
- zatem skoro piszesz, że odpczytuje go jako tekst (String) to dlaczego nie można go wyświetlić już teraz, tylko jest potrzebna kolejna funkcja do 'załadowania' ?

Znów pewnie proste pytania i banalne. Mimo wszystko proszę o cierpliwość i wyrozumiałość (IMG:style_emoticons/default/wink.gif) .


Ten post edytował bAb1k 27.05.2015, 20:02:28
Go to the top of the page
+Quote Post
Comandeer
post
Post #8





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Kod
this.files[0]

Dany input, jeśli ma nadany atrybut [multiple], może służyć do wybrania kilku plików. Wówczas wszystkie są one dostępne tutaj. Rozumienie na sposób b nie ma za bardzo sensu, bo to nie input jest pierwszym z kolekcji (bo jest tylko jeden), a plik

Cytat
zatem skoro piszesz, że odpczytuje go jako tekst (String) to dlaczego nie można go wyświetlić już teraz, tylko jest potrzebna kolejna funkcja do 'załadowania' ?

Wyobraź sobie, że próbujesz w taki sposób odczytać plik, który ma spory rozmiar (np. 100 MB). Taka operacja może długo potrwać i gdyby FileReader pracował synchronicznie, to cała karta przeglądarki byłaby zamrożona aż do czasu, gdy ten wielki plik by się nie wczytał. Jeśli natomiast całość jest asynchroniczna, to podczas, gdy przeglądarka ten plik wczytuje w tle, user wciąż może korzystać z reszty strony.

Cytat
To jak za pomocą 'addEventListener('click', function(e)...' wydostać zawartość tego <p> ?

Przy pomocy własności innerHTML
Go to the top of the page
+Quote Post
bAb1k
post
Post #9





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 12.10.2012

Ostrzeżenie: (0%)
-----

Dzięki wielkie (IMG:style_emoticons/default/wink.gif) .

Pierwsza część za mną. Już udało mi się generować tablice i szukam nowego tematu, a jak nie to zakładam nowy, bo tym razem eventu mi nie wykrywa ;/.
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 28.09.2025 - 15:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn