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

[DivMan]

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

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

https://jsfiddle.net/w30shtu9/

 

Скрытый текст

<div class="wrap">

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

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

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

</div>

 

Скрытый текст

.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;
	}

 

 

Скрытый текст

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);
});

 

 

Edited August 8, 2017 by DivMan

[Switch74]

Проверку на картинку бы еще сделать, а то я любой файл могу выбрать.
И возможно пригодится выбор нескольких файлов сразу.

[DivMan]

Проверку я на php сделал