Форум

Miracle5 · #1 (**permalink**) 23.03.2018, 08:15

Делаю небольшое приложение для пазлов, осталось дописать код, чтобы пользователь сам мог задавать изображение или через input/file, или input/text (т.е по URL).

Как сделать на javascript, чтобы при загрузке картинка автоматически подставлялась под поле. Т.е на сервер отправлять не нужно, чисто игра на странице.

<td style="vertical-align: top;">
                <div align="right" style="height: 585px; width: 320px; border: black solid 1px; overflow: auto;">
                    <div>
						<p>Загрузить свою картинку</p>
						<p><input type="file" name="photo" multiple accept="image/*,image/jpeg">
						<input type="submit" value="Загрузить">
						<p>или введите URL картинки</p>
						<input type="text" name="url_text" value="Введите URL фото">
						<input type="submit" name="url_photo" value="Подтвердить"></p>

                        <img id="img1" width="300" height="200" ondblclick="LoadNewImage(this.id);" src="Images/BugsLife.jpg"></img>
                    </div>
                </div>
            </td>

Первая картинка статистическая, нужно добавить такое же поле с изменением id=img(тут счетчик +1) и src брать от input/file

<img id="img1" width="300" height="200" ondblclick="LoadNewImage(this.id);" src="Images/BugsLife.jpg"></img>

Как это сделать?

ksa · #2 (**permalink**) 23.03.2018, 09:02

Miracle5, через input/file файл "забрать" может только сервер. Клиент к этому файлу доступа не получит.

А вот если пользователь введет в input/text путь и имя файла, то картинка твоя!

<img src='' />
<script type='text/javascript'>
var url='d:\\doc\\ksa.jpg';
document.querySelector('img').src=url;
</script>

laimas · #3 (**permalink**) 23.03.2018, 09:06

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

через input/file файл "забрать" может только сервер. Клиент к этому файлу доступа не получит.

Это почему?

ksa · #4 (**permalink**) 23.03.2018, 09:15

laimas, лучше пример покажи как сделать.

laimas · #5 (**permalink**) 23.03.2018, 09:25

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

лучше пример покажи как сделать.

https://developer.mozilla.org/ru/doc...API/FileReader - метод .readAsDataURL(), его возвращаемые данные в src изображения.

ksa · #6 (**permalink**) 23.03.2018, 10:33

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

метод .readAsDataURL()

Ошибка...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
label {
	display: block;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<label>
	Выбор файла
	<input type='file' id='test' />
</label>
<button onclick='test();'>Test</button>
<script type='text/javascript'>
function test(){
	var o=document.querySelector('input');
	alert(o.readAsDataURL());
};
</script>
</body>
</html>

ksa · #7 (**permalink**) 23.03.2018, 10:41

laimas, т.е. пример покажи...

Nexus · #8 (**permalink**) 23.03.2018, 10:42

ksa,

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

Ошибка...

вы шутите что ли?)

Upd. вот с FileReader.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
label {
	display: block;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<label>
	Выбор файла
	<input type='file' id='test' />
</label>
<button onclick='test();'>Test</button>
<script type='text/javascript'>
function test(){
var input=document.querySelector('input');
		if(!input.files.length)
			return;
		
		var fReader=new FileReader();
		fReader.onload=function(){
			alert(this.result);
		};
		fReader.readAsDataURL(input.files[0]);
};
</script>
</body>
</html>

Вот с URL.createObjectURL.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
label {
	display: block;
}
#preview img{
	max-width:100px;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<label>
	Выбор файла
	<input type='file' id='test' />
</label>
<button onclick='test();'>Test</button>
<div id="preview"></div>
<script type='text/javascript'>
function test(){
	var input=document.querySelector('input');
		if(!input.files.length)
			return;
		
		var img=document.createElement('img');
		img.src=URL.createObjectURL(input.files[0]);
		document.querySelector('#preview').appendChild(img);
};
</script>
</body>
</html>

рони · #9 (**permalink**) 23.03.2018, 10:52

readAsDataURL

laimas · #10 (**permalink**) 23.03.2018, 11:25

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

т.е. пример покажи...

Да только на этом форуме этих примеров уже и так как грязи, и я тоже такой "плагиат" здесь писал. Ну сколько можно?

Форум

Справочник

Discord чат

Курсы javascript