Pobieranie wartości z input file i przypisanie jej do js

Question

Witam :) 

Posiadam problem związany z pobraniem zdjęcia z inputa type file id= rej-zdj. Gdy pobieram tą wartość w js, a następnie wyświetlam ją w przeglądarce to występuje błąd w ładowaniu linku.

Czyli:

var zdj = document.getElementById('rej-zdj').value; (pobiera wartość z inputa)

var zdj_n = document.getElementById('rej-zdj-n'); (id gdzie ma się wyświetlić zdjęcie)

var img = document.createElement('img');
   img.className = "zdj-nowe";
   img.src = zdj;
   zdj_n.appendChild(img);

(przypisuje pobraną ścieżkę do img) 

i przy wykonaniu tego scriptu na stronie nie wyświetla się zdjęcie i ścieżka zaczyna się od C:\fakepath\zdj.jpg . Zdjęcie jest w katalogu F:\..\str . Z tego co doczytałem to fakepath jest czymś w rodzaju zabezpieczenia w przeglądarkach (Chyba) 

Tak to wygląda na stronie: 

1. Wyszukiwanie pliku

2.Wybieranie pliku

3.Podanie pliku

4.Wykonanie funkcji (onClick)

a) Pojawia się po wykonaniu funkcji

po przypisaniu ręcznie w js do

img.src = "brillo.jpg"; zdjęcie wyświetla się poprawnie.

Czy jest możliwość wyświetlenia tego zdjęcia tylko za pomocą js(bez PHP)? Z góry dziękuję za jakąkolwiek próbę pomocy :) 

Answer 1

To tak nie działa, pole value z elementu input[type=file] nie odnosi się do rzeczywistej ścieżki, a to wszystko ze względu na bezpieczeństwo jeśli chodzi o manipulację informacjami o plikach lokalnych. Musisz skorzystać z FileReader API, prosty przykład jak to zrobić masz na przykład tutaj.

Comments

Wielkie dzięki męczyłem się z tym od ponad godziny