Sunday, November 9, 2014

How to show preview of image before upload using HTML5?

How to show preview of image before upload using HTML5?


<!DOCTYPE HTML>
<html>
<head>

</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

<script defer="defer">
function previewFile()
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
alert (file);
var reader = new FileReader();

reader.onloadend = function ()
preview.src = reader.result;
alert (preview.src);


if (file)
reader.readAsDataURL(file);
else
preview.src = "";


</script>
</body>
</html>


How to show preview of image before upload using HTML5?

No comments:

Post a Comment