Как выбрать файл нажатием на картинку

@maxoun · Регистрация: 08.02.2018

Author24 — интернет-сервис помощи студентам

Всем привет. Подскажите пожалуйста.
Есть блок где стоит картинка нет фото.
Как сделать так чтобы при нажатии на картинку нет фото, выводить выбор файла как к примеру с <input type=file /> ????
Всем спасибо желательно 2 примера на js и на jquery

@renat_dmitriev · 08.10.2018, 19:50

Сделать невидимый

HTML5

1	<input type=file />

, дать ему id и обратившись к нему вызвать метод click(), примеров в интернете полно... Самый простой

HTML5

1 2	<img src='' alt='Нет фото' onclick='f.click()'></img> <input type="file" id=f hidden />

@Mr_Sergo · 08.10.2018, 21:12

maxoun,

Тут вполне можно обойтись и без JS

Демка

HTML5

<div class="input-file">
    <input type="file">
    <div class="input-overflow"></div>
</div>

CSS

html, body{margin: 0px 0px 0px 0px;width:  100%;height: 100%;font-size: 15px;background: #2196F3;}
 
.input-overflow{
    width: 200px;
    height: 200px;
    position: absolute;
    z-index: 0;
    background-image: url(https://spaf-mega.ru/files/268/268ac00ecf0a06eb631969e9932081d8.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0px 0px;
}
 
input[type="file"]{
    width: 200px;
    height: 200px;
    cursor: pointer;
    position: absolute;
    z-index: 1;
    opacity: 0;
}

И дальше на серверной стороне принимаете, как у вас там все устроенно: ajax или обычная отправка

Сообщение от renat_dmitriev

обратившись к нему вызвать метод click()

Для чего?

@maxoun 21 / 44 / 11 Регистрация: 08.02.2018 Сообщений: 443
		1
	Как выбрать файл нажатием на картинку 08.10.2018, 18:51. Показов 3393. Ответов 2 Метки нет (Все метки) Всем привет. Подскажите пожалуйста. Есть блок где стоит картинка нет фото. Как сделать так чтобы при нажатии на картинку нет фото, выводить выбор файла как к примеру с <input type=file /> ???? Всем спасибо желательно 2 примера на js и на jquery 0

	08.10.2018, 21:12