Tak więc zasadniczo muszę przesłać pojedynczy obraz, zapisać go na localStorage, a następnie wyświetlić na następnej stronie.

Obecnie przesyłam plik HTML:

<input type='file' id="uploadBannerImage" onchange="readURL(this);" />

Który używa tej funkcji do wyświetlania obrazu na stronie

function readURL(input) 
{
    document.getElementById("bannerImg").style.display = "block";

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            document.getElementById('bannerImg').src =  e.target.result;
        }

        reader.readAsDataURL(input.files[0]);
    }
}

Obraz jest wyświetlany natychmiast na stronie, aby użytkownik mógł go zobaczyć. Następnie są proszeni o wypełnienie reszty formularza. Ta część działa doskonale.

Po wypełnieniu formularza naciśnij przycisk „Zapisz”. Po naciśnięciu tego przycisku zapisuję wszystkie dane wejściowe formularza jakolocalStorage smyczki. Potrzebuję sposobu na zapisanie obrazu jakolocalStorage pozycja.

Przycisk Zapisz również przekieruje ich na nową stronę. Ta nowa strona wyświetli dane użytkowników w tabeli, a obraz będzie na górze.

Tak prosty i prosty, muszę zapisać obraz wlocalStorage po naciśnięciu przycisku „Zapisz”, a następnie wypożyczeniu obrazu na następnej stronielocalStorage.

Znalazłem kilka rozwiązań, takich jakto skrzypce iten artykuł w moz: // a HACKS.

Chociaż nadal jestem bardzo zdezorientowany, jak to działa, naprawdę potrzebuję prostego rozwiązania. Zasadniczo muszę tylko znaleźć obraz za pośrednictwemgetElementByID po naciśnięciu przycisku „Zapisz”, a następnie przetworzeniu i zapisaniu obrazu.