<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id='file' type="file" οnchange="setText()" />
<input id='text' type='text' />
<img id='img' style="width:100px;height: 100px;" />
</body>
<script type="text/javascript">
function setText() {
var text = document.getElementById('text');
var fileInput = document.getElementById('file');
var img = document.getElementById('img')
var file = fileInput.files[0]
var reader = new FileReader();
switch (file.type.split('/')[0]) {
case "image":
reader.readAsDataURL(file);
reader.onload = function () {
img.src = reader.result;
}
break;
case 'text':
reader.readAsText(file, 'utf-8');
reader.onload = function () {
text.value = reader.result
}
}
}
</script>
</html>
