Есть окно выбора картинки через input, можно ли сделать чтобы src картинки подгружалось при выборе из локального компьютера, или же может какое то хранилище для этого есть? Суть в том чтобы менять картинку без загрузки её на сервер
1 ответ
Сделать можно. С помощью объекта FileReader.
Объект FileReader позволяет веб-приложениям асинхронно читать содержимое файлов (или буферы данных), хранящиеся на компьютере пользователя, используя объекты File или Blob, с помощью которых задается файл или данные для чтения.
Его метод .readAsDataURL()
позволит считать данные файла в виде data: URL, которые мы потом кладем в атрибут src картинки, и она отобразится.
<form id="form1">
<input type="file" id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
--
function readURL(input) {
if (input.files && input.files[0]){
var reader = new FileReader();
reader.onload = function(e){
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function(){
readURL(this);
});