Wednesday, 22 June 2016

Show/Hide Image in Javascript with fileupload

<html>
<head>
<script>
  var loadFile = function(event) {
var img = document.getElementById('output');
    img.style.visibility = 'visible';
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
function resetimg()
{
var img = document.getElementById('output');
    img.style.visibility = 'hidden';

}
</script>
</head>
<body onload="resetimg()">
<form name="f1">
<input type="file" accept="image/*" onchange="loadFile(event)">

<img id="output" width="100px" height="150px"/>

<br/>
<input type="reset" value="Clear" onclick="resetimg()"/>
</form>
</body>

Tuesday, 21 June 2016

Preview an Image when browse using Javascript

<html>
<head>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>
</head>
<body>

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output" width="100px" height="150px"/>
</body>