Select Single File with Input File Type
<html>
<head>
<meta charset="ISO-8859-1">
<title>Single File Select with Input File Type</title>
</head>
<body>
<form name="myform">
Photo
<input type="file" onchange="selectFile()" id="fileinput" accept="image/*">
<br>
<div id="result"></div>
</form>
<script type="text/javascript">
function selectFile() {
var file = document.getElementById('fileinput').files[0];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
alert('Invalid');
}
else {
var result = 'File Name: ' + file.name;
result += '<br>File Size: ' + file.size + ' (bytes)';
result += '<br>File Type: ' + file.type + '<br>';
document.getElementById('result').innerHTML = result;
// Load Photo
var img = document.createElement("img");
img.file = file;
document.getElementById('result').appendChild(img);
var reader = new FileReader();
reader.onload = (function (aImg) { return function (e) {
aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>
Run Application
Open site in browser and display as below:
