Стилизация input type и его превью

[DivMan]

Мне надо было стилизовать input type, и что бы после загрузки, показалась превьюшка, я искал готовые решения, но они были какие-то очень большие, некоторые даже подключают большой css файл ratchet.css.


И я решил написать свой решение, хороший ли это способ?

Добавил элемент button и имитация клика по инпуту.

<style>

	.wrap {border: 1px solid; width: 500px;}

	#photoInput {
		display: none;
	}
	
	.img-circle {
		width: 400px;
		height: 210px;
		border: 1px solid;
		object-fit: cover;
	}
	
	.addImg {
		margin-top: 20px;
		border: 0;
		background: url("http://i94.fastpic.ru/big/2017/0808/6b/5c6e9d842b4ecb782a9c8132a068966b.png") no-repeat 8px 8px #0c6eb9;
		color: white;
		text-transform: uppercase;
		padding: 8px;
		padding-left: 30px;
		border-radius: 5px;
	}
</style>

<div class="wrap">

	<div>
		<img src="" class="img-circle" id="theImage">
	</div>

	<input type="file" id="photoInput">

	<button class="addImg">Доб. Изображение</button>

</div>

<script>

var btn = document.querySelector(".addImg");
var photoFile = document.getElementById("photoInput");

btn.addEventListener('click', function() {
	photoFile.click();
})

	var fileReader = new FileReader();
		fileReader.addEventListener('load', function() {
			theImage.src = this.result;
		});

		photoInput.addEventListener('change', function(e) {
		var file = e.target.files[0];

		fileReader.readAsDataURL(file);
});
</script>

[Rise]

DivMan,
Что сказать, способы стандартные, 2 из 4-х возможных)

Есть только 2 способа сделать превью:
1. FileReader.readAsDataURL(File)
2. URL.createObjectURL(File)

Есть только 2 способа имитации клика по инпуту:
1. trigger click
2. label click

Всё остальное это не способы, а стилизация, которая ограничена лишь вашей фантазией.

https://developer.mozilla.org/en-US/...ent/input/file
https://developer.mozilla.org/en-US/...b_applications