Javascript-форум - Предварительный просмотр через input/file

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Предварительный просмотр через input/file (https://javascript.ru/forum/misc/73130-predvaritelnyjj-prosmotr-cherez-input-file.html)

Предварительный просмотр через input/file

Делаю небольшое приложение для пазлов, осталось дописать код, чтобы пользователь сам мог задавать изображение или через 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>

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

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

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

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

Цитата:

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

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

Это почему?

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

Цитата:

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

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

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

Цитата:

Сообщение от 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>

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

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>

Цитата:

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

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

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