Получить изображение из локального хранилища - PullRequest
Новая
       15

Получить изображение из локального хранилища

0 голосов
/ 25 мая 2019

У меня есть вход для загрузки изображений. Я храню изображение в Loacal Storage браузера. После загрузки изображения я получаю информацию в моем локальном хранилище. Используя эту информацию, я хочу отобразить изображение на странице. Я создал следующий скрипт: 

document.getElementById('register').onclick = function () {
        var userImg = document.getElementById('img_user').value;
        localStorage.setItem('Img', userImg);
    };
 <form action="">
  <input id="img_user" type="file">
  </form>
  <button id="register">Register Me</button>
Чтобы получить данные об изображении из локального хранилища, я знаю, что должен использовать localStorage.getItem('Img'), но что мне следует использовать для отображения изображения, загруженного в локальное хранилище?

1 Ответ

0 голосов
/ 25 мая 2019

вы можете сделать что-то вроде этого, 

<html>
<head></head>
<body>
<form action="">
  <input id="img_user" type="file">
  </form>
  <button id="register">Register Me</button>
  <img id="uploaded_img" />

  <script>
    function uploadImg(reloadElement) {
        var file = document.getElementById('img_user').files[0];
        if (file) {
            var name = file.name;
            var ext = name.substr(name.lastIndexOf(".") + 1, 4).toLowerCase()
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function (e) {
                var binaryString = e.target.result.toString();

                //upload the data(binaryString) and then onsuccess of call back you can set the image as below or store it on localstorage whatever u want

                if (reloadElement) {
                    document.getElementById(reloadElement).src = binaryString;
                }
            };
        }
    }



    document.getElementById('register').onclick = function () {
        uploadImg('uploaded_img');
    };
  </script>
</body>
</html>

вы можете загрузить данные binaryString на серверную сторону

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...