Отображение рисунка по нажатию на кнопку

@DarkVoin · Регистрация: 16.11.2014

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

Подскажите как сделать, чтобы при вводе имени файла в input type="text" и нажатию на кнопку отображался этот файл. Пример во вложении.

@DarkVoin · 06.03.2016, 16:05 **[ТС]**

Вот что у меня получилось только не работает ((

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<HTML>  
<HEAD>
<title>Просмотр рисунка</title> 
<script language="JavaScript"> 
 
function kartinka() {
var d=document
var b=d.num1
d.krt.src=b
return b
}
</SCRIPT>
</HEAD>
<body>
<FORM NAME="form1">
<h4>Просмотр рисунка</h4>
<img src="b" name=krt align="left"><BR><BR>
Введите имя файла с рисунком: <BR>
<input type="text" size=8 name="num1">
<INPUT TYPE="button" VALUE="Показать" onClick="kartinka(form1)">
</body>
</FORM>
</HTML>

@BANO · 06.03.2016, 17:29

DarkVoin, а эти файлы откуда берутся?
с сервера или с компа у клиента?

@DarkVoin · 06.03.2016, 18:30 **[ТС]**

с компа

@alexsamos33 · 06.03.2016, 19:45

DarkVoin, Посмотрите здесь:
Работа с файлами в JavaScript, Часть 2: FileReader

@DarkVoin · 07.03.2016, 04:40 **[ТС]**

alexsamos33, Сори ничего не понял, впервые столкнулся с JS((

@alexsamos33 · 07.03.2016, 07:43

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

alexsamos33, Сори ничего не понял, впервые столкнулся с JS((

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="file" name="file1" id="file1">
<div id="dv1"></div>
<script>
window.onload = function() {
    var reader = new FileReader();
    reader.onload = function(event) {
        var dataUri = event.target.result,
        dv = document.getElementById("dv1"),
        img = document.createElement("img");
        img.src = dataUri;
        dv.innerHTML = '';
        dv.appendChild(img);
    };
    reader.onerror = function(event) {
        console.error("Error reader. Error code: " + event.target.error.code);
    };
    var fl1 = document.getElementById("file1");
    fl1.onchange = function() {
        reader.readAsDataURL(fl1.files[0]);
    };
};
</script>

@newJS · 07.03.2016, 07:51

если с компа

HTML5
1
2
3
4
5
<h4>Просмотр рисунка</h4>
<img src="#" id="krt" align="left"><BR><BR>
Введите имя файла с рисунком: <BR>
<input type="text" size="8" id="num1">
<input type="button" value="Показать" onclick="kartinka()">

JavaScript
1
2
3
4
5
6
function kartinka(){
var v, p="pics/";// путь к папке с картинками
v=document.getElementById("num1").value;
document.getElementById("krt").src=p+v;
 
 };

@DarkVoin · 08.03.2016, 15:29 **[ТС]**

А как сделать чтобы "Введите имя файла с рисунком", поле ввода и кнопка всегда были ниже рисунка, а то после того как рисунок вставляется все это убегает вправо.

@newJS · 08.03.2016, 16:46

Саму картинку засунуть в div и убрать лишние переводы строк.
Может не вниз, а сверху? тогда они всё время будут в одном месте, а внизу будет зависеть от высоты картинки.

@DarkVoin · 08.03.2016, 21:11 **[ТС]**

newJS, спасибо попробую

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@DarkVoin 0 / 0 / 0 Регистрация: 16.11.2014 Сообщений: 31

	Отображение рисунка по нажатию на кнопку 06.03.2016, 15:57. Показов 4906. Ответов 10 Метки нет (Все метки) Подскажите как сделать, чтобы при вводе имени файла в input type="text" и нажатию на кнопку отображался этот файл. Пример во вложении. Изображения 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	06.03.2016, 17:29
	DarkVoin, а эти файлы откуда берутся? с сервера или с компа у клиента? 0

@DarkVoin 0 / 0 / 0 Регистрация: 16.11.2014 Сообщений: 31
	06.03.2016, 18:30 [ТС]
	с компа 0

@alexsamos33 669 / 640 / 335 Регистрация: 26.04.2014 Сообщений: 2,122
	06.03.2016, 19:45
	DarkVoin, Посмотрите здесь: Работа с файлами в JavaScript, Часть 2: FileReader 0

@DarkVoin 0 / 0 / 0 Регистрация: 16.11.2014 Сообщений: 31
	07.03.2016, 04:40 [ТС]
	alexsamos33, Сори ничего не понял, впервые столкнулся с JS(( 0

@DarkVoin 0 / 0 / 0 Регистрация: 16.11.2014 Сообщений: 31
	08.03.2016, 15:29 [ТС]
	А как сделать чтобы "Введите имя файла с рисунком", поле ввода и кнопка всегда были ниже рисунка, а то после того как рисунок вставляется все это убегает вправо. 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,531
	08.03.2016, 16:46
	Саму картинку засунуть в div и убрать лишние переводы строк. Может не вниз, а сверху? тогда они всё время будут в одном месте, а внизу будет зависеть от высоты картинки. 1

@DarkVoin 0 / 0 / 0 Регистрация: 16.11.2014 Сообщений: 31
	08.03.2016, 21:11 [ТС]
	newJS, спасибо попробую 0

Отображение рисунка по нажатию на кнопку

Решение