[JavaScript]Dodanie i pokazanie obrazka po kliknięciu Opcje

[BienuSS]

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

[HTML] pobierz, plaintext 
<script>
  function previewFile(q1) {
 
  var preview = document.getElementById(q1);
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
 
  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);
 
  if (file) {
    reader.readAsDataURL(file);
  }
}
  </script>
 
[HTML] pobierz, plaintext 

[trueblue]

[HTML] pobierz, plaintext 
document.querySelector('input[type=file]')
[HTML] pobierz, plaintext 

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

[BienuSS]

z tym dopiskiem

[SQL] pobierz, plaintext 
.files[0];
[SQL] pobierz, plaintext 

nie powinien znajdywać pierwszego pustego inputa ?

[trueblue]

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

[BienuSS]

Zmieniłem na pobieranie inputa prze ID

[SQL] pobierz, plaintext 
document.getElementById('images-upload-input-2');
[SQL] pobierz, plaintext 

próbowałem też z dopiskiem .val(), ale nic to nie daje. Jakaś rada w jaką funkcje isc ?

[trueblue]

Pokaż kod po zmianach.

[BienuSS]

Przerobiłem w ten sposób obrazek wysyła ale nie pokazuje na żywo, plus jak zmieniam jeden obrazek to pozostałe sie kasują ...

[SQL] pobierz, plaintext 
<input type="file" id="images-upload-input-1" accept=".png, .jpg, .jpeg" name="image_1" onchange="openFile('images-upload-input-1');" style='display: none;' />
 
FUNCTION openFile(q1) {
    var input = q1.target;
 
    var reader = new FileReader();
    reader.onload = FUNCTION(){
      var dataURL = reader.result;
      var output = document.getElementById('img-new-1');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
    input.readAsDataURL(output);
  };
[SQL] pobierz, plaintext 

jesli zmienie

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

to obrazek sie pokazuje ale nie wysyła.

Ten post edytował BienuSS 19.10.2020, 17:06:10

[trueblue]

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.

[BienuSS]

Dlatego najpierw zdeklarowałem zmienną do każdego inputa

[SQL] pobierz, plaintext 
    var input = q1.target;
[SQL] pobierz, plaintext 

Później podpiąłem do tego ten kod

[SQL] pobierz, plaintext 
    reader.readAsDataURL(input.files[0]);
[SQL] pobierz, plaintext 

Miałem nadzieje ze to na tej zasadzie bedzie działało