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 

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

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

z tym dopiskiem

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

nie powinien znajdywać pierwszego pustego inputa ?

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

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 ?

Pokaż kod po zmianach.

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.

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.

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