как загрузить картинку через input

358
04 августа 2021, 13:40

Вот мой код:

<body>
<input type="file" id="file1" />
<img src="" id="image1" width="500px" height="500px" />
<button onclick="save()">Save</button>
<script>
  function save() {
    document.getElementById("image1").src = document.getElementById("file1").value;
  }
</script>

Как сделать так что бы выбранная картинка пользователем, загрузилась в img и реализовать это с помощью javascript. Я в этом новичок, пробовала искать в интернете но варианты не подошли. Буду благодарна за помощь.

Answer 1

Если я все правильно понял, Вам нужен URL.createObjectURL :

<input type="file" id="file1" /> 
<button onclick="save()">Save</button> 
<img id="image1" width="500px" height="500px" /> 
<br> 
<script> 
     
    function save ()  { 
        let f = file1.files[0]; 
        if (f) { 
            image1.src = URL.createObjectURL(f); 
            localStorage.setItem('myImage', image1.src); 
        } 
    } 
     
    image1.src = localStorage.getItem('myImage') 
</script>

Answer 2

Можно сделать так

document.getElementById('file1').addEventListener('change', function() { 
if (this.files && this.files[0]) { 
    var reader = new FileReader(); 
      reader.onload = function (e) { 
      document.getElementById('image1').setAttribute('src', e.target.result); 
    }; 
    reader.readAsDataURL(this.files[0]); 
  } 
 
});
<input type="file" id="file1" /> 
<img src="" id="image1" width="500px" height="500px" />

Answer 3

Можно еще использовать объект URL. А показывать картинку сразу после выбора:

let image = document.getElementById("image"); 
let file = document.getElementById("file"); 
 
file.addEventListener('change', function(){ 
  image.src = URL.createObjectURL(file.files[0]); 
  image.style.display = "block"; 
});
<input type="file" id="file" /> 
<img src="" id="image" style="max-width: 600px; display: none;"/>

READ ALSO
Проблема с асинхронностью
javascript

Проблема с асинхронностью

Всем приветЕсть такой код:

 244
Redux обновить в &hellip;state после action и записать в другой action
javascript

Redux обновить в …state после action и записать в другой action

Оба action в разных компонентахПростым языком: когда я кликаю на тег в одном компоненте, его содержимое попадает в reducer

 141
ошибка Cannot read property &#39;value&#39; of undefined
javascript

ошибка Cannot read property 'value' of undefined

Есть функция, которая считывает значения из одного тэга и вставляет значения в другой тэгФункция работает корректно, но в консоли появляется...

 222
Примагнитить картинку ко 2 картинке. Js
javascript

Примагнитить картинку ко 2 картинке. Js

Есть 2 картинки, перемещающиеся по траектории эллипсаС двумя условиями: они перемещаются по разным эллипсам(они отличаются только радиусом

 113