Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript]Dodanie i pokazanie obrazka po kliknięciu
BienuSS
post 19.10.2020, 14:55:19
Post #1





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----


Witam.
Mam na stronie 4 pola aby dodać obrazy, po dodaniu 1 wszystko sie ładnie zmienia i zapisuje. Jednak w pozostałych 3 juz nie działa. Jak dla mnie wina jest w zmiennej "file" jednak nie moge dojsc do rozwiązania problemuf
  1. function previewFile(q1) {
  2.  
  3. var preview = document.getElementById(q1);
  4. var file = document.querySelector('input[type=file]').files[0];
  5. var reader = new FileReader();
  6.  
  7. reader.addEventListener("load", function () {
  8. preview.src = reader.result;
  9. }, false);
  10.  
  11. if (file) {
  12. reader.readAsDataURL(file);
  13. }
  14. }
  15. </script>
  16.  
Go to the top of the page
+Quote Post
trueblue
post 19.10.2020, 14:57:21
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


  1. document.querySelector('input[type=file]')

Ten kod znajduje pierwszy <input type="file"> na stronie.


--------------------
Go to the top of the page
+Quote Post
BienuSS
post 19.10.2020, 15:02:18
Post #3





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----


z tym dopiskiem
  1. .files[0];

nie powinien znajdywać pierwszego pustego inputa ?
Go to the top of the page
+Quote Post
trueblue
post 19.10.2020, 15:09:28
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


Ten dopisek wskazuje na pierwszy wybrany plik w danym inpucie (input może pozwalać wybrać więcej niż jeden plik z opcją multiple).


--------------------
Go to the top of the page
+Quote Post
BienuSS
post 19.10.2020, 15:26:39
Post #5





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----


Zmieniłem na pobieranie inputa prze ID
  1. document.getElementById('images-upload-input-2');

próbowałem też z dopiskiem .val(), ale nic to nie daje. Jakaś rada w jaką funkcje isc ?
Go to the top of the page
+Quote Post
trueblue
post 19.10.2020, 15:51:06
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


Pokaż kod po zmianach.


--------------------
Go to the top of the page
+Quote Post
BienuSS
post 19.10.2020, 16:53:11
Post #7





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----


Przerobiłem w ten sposób obrazek wysyła ale nie pokazuje na żywo, plus jak zmieniam jeden obrazek to pozostałe sie kasują ...
  1. <input type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="openFile('images-upload-input-1');" style='display: none;' />
  2.  
  3. FUNCTION openFile(q1) {
  4. var input = q1.target;
  5.  
  6. var reader = new FileReader();
  7. reader.onload = FUNCTION(){
  8. var dataURL = reader.result;
  9. var output = document.getElementById('img-new-1');
  10. output.src = dataURL;
  11. };
  12. reader.readAsDataURL(input.files[0]);
  13. input.readAsDataURL(output);
  14. };


jesli zmienie

  1.  
  2. <input type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="openFile(event);" style='display: none;' />


to obrazek sie pokazuje ale nie wysyła.

Ten post edytował BienuSS 19.10.2020, 17:06:10
Go to the top of the page
+Quote Post
trueblue
post 19.10.2020, 17:12:49
Post #8





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

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


No ale files[0] nadal należy używać. Tak jak pisałem, wartość tego elementu wskazuje na wybrany plik. Gdybyś miał opcję multiple dla input, to wartości byłyby również pod kolejnymi indeksami.


--------------------
Go to the top of the page
+Quote Post
BienuSS
post 20.10.2020, 08:45:51
Post #9





Grupa: Zarejestrowani
Postów: 152
Pomógł: 0
Dołączył: 3.11.2017

Ostrzeżenie: (10%)
X----


Dlatego najpierw zdeklarowałem zmienną do każdego inputa
  1. var input = q1.target;

Później podpiąłem do tego ten kod
  1. reader.readAsDataURL(input.files[0]);


Miałem nadzieje ze to na tej zasadzie bedzie działało
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 01:39