Show inputted image
By Marcin Olejarz
Javascript code shows up image inputted. You can also zoom it by click on - simple hover.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#show-Pic {
position:absolute;
width:100px;
left:100px;
}
#show-Pic:hover {
display:block;
width:300px;
left:5px;
}
</style>
</head>
<body>
<form>
<input type="file" id="take-Pic" accept="image/*"><br />
<img src="about:blank" alt="IMG" id="show-Pic">
</form>
<script>( function () {
// variables of input and img
var takePic = document.querySelector("#take-Pic"),
showPic = document.querySelector("#show-Pic");
if (takePic && showPic) {
// runs when you use input
takePic.onchange = function (swap) {
var files = swap.target.files,
file;
if (files && files.length > 0) {
file = files[0];
try {
var fileReader = new FileReader();
fileReader.onload = function (swap) {
showPic.src = swap.target.result;
};
fileReader.readAsDataURL(file);
}
catch (e) {
showPic.alt = "error";
}
}
};
}
})();</script>
</body>
</html>