Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [Javascript] Wczytanie pliku do tablicy
bAb1k
post 27.05.2015, 11:44:19
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 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 wink.gif.

Z góry dziękuję za pomoc wink.gif

[Dalsze czytanie na własną rękę 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 wink.gif

Ten post edytował bAb1k 27.05.2015, 11:48:35
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 8)
Comandeer
post 27.05.2015, 12:21:55
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ć


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
bAb1k
post 27.05.2015, 13:10:51
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 27.05.2015, 15:52:35
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 wink.gif
  • JS to asynchroniczność, asynchroniczność i jeszcze raz eventy 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


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
bAb1k
post 27.05.2015, 17:02:10
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ć wink.gif. Na temat pierwszego parametru 'change' - wszystko jasne - nie ma wątpliwości, a parametr true/false też już rozumiem wink.gif.
Go to the top of the page
+Quote Post
Comandeer
post 27.05.2015, 17:08:55
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 wink.gif

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

Jako tekst, więc rzutuje go na typ string.


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
bAb1k
post 27.05.2015, 18:05:24
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 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. ?
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ść wink.gif.


Ten post edytował bAb1k 27.05.2015, 20:02:28
Go to the top of the page
+Quote Post
Comandeer
post 27.05.2015, 20:08:07
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


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
bAb1k
post 28.05.2015, 00:39:54
Post #9





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

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

Dzięki wielkie 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
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

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

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

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 08:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn