Форум Сайтостроение Веб-строительство

JavaScript - отобразить картинку на странице

SN
На сайте с 04.07.2013
Offline
84
SeoNk
2249

На странице есть такой тег:

<input type="file">

Это кнопка для выбора загружаемого файла.

Мне нужно чтобы после того как я выберу файл, расположенный по адресу: c:\images\img.jpg, на этой же странице сразу после обозначенного тега input появилась картика с выбраным файлом. Т.е. создался тег:

<img src="c:\images\img.jpg">

Как это сделать используя JS / jQuery ??

Спасибо

PS Я могу создавать теги. Сложность именно в получении адреса картинки на локальном компьютере. В какой переменной он хранится или какой функцией его получить?

Z0
На сайте с 03.09.2009
Offline
827
ziliboba0213
#1

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

https://yandex.ru/search/?lr=2&text=jquery%20input%20file%20предпросмотр%20изображения

http://ru.stackoverflow.com/questions/266125/%D0%9F%D1%80%D0%B5%D0%B4%D0%BF%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BF%D1%80%D0%B8-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B5-%D0%B2-input-type-file

https://xn--d1acnqm.xn--j1amh/%D0%B7%D0%B0%D0%BF%D0%B8%D1%81%D0%B8/javascript-%D1%80%D0%B5%D0%B0%D0%BB%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F-%D0%BF%D1%80%D0%B5%D0%B4%D0%BF%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B0-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B6%D0%B0%D0%B5%D0%BC%D0%BE%D0%B3%D0%BE-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F

и так далее 🍿

MT
На сайте с 17.01.2017
Offline
22
MikeTheRaven
#2

Да всё элементарно - загружаете файл на сервер через ajax и выводите тег на странице. Примеров валом, ищите готовые плагины по запросу "jquery file upload", разбирайтесь и будет Вам счастье.

Z0
На сайте с 03.09.2009
Offline
827
ziliboba0213
#3
MikeTheRaven:
Да всё элементарно - загружаете файл на сервер через ajax и выводите тег на странице. Примеров валом, ищите готовые плагины по запросу "jquery file upload", разбирайтесь и будет Вам счастье.

Как я понял, ТС надо предпросмотр изображения перед загрузкой 🍿

webiumpro
На сайте с 20.03.2017
Offline
39
webiumpro
#4 


 $('input[type="file"]').change(function () {

        for (var i = 0, f; f = this.files; i++) {

            var reader = new FileReader();

            reader.onload = (function (f) {

                return function (e) {

                    $('img').attr('src', e.target.result)

                }

            })(f);

            reader.readAsDataURL(f);

        }

    });
Копирование лендингов. Разработка на фреймворке сервисов. Создание сайтов (/ru/forum/994418)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий