SOURCE CODE
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<form> <input type="file" id="image-input" onchange="previewImage()"> <img id="image-preview" src="#" alt="image preview"> </form> <script> function previewImage() { var input = document.getElementById('image-input'); var preview = document.getElementById('image-preview'); var reader = new FileReader(); reader.onload = function() { preview.src = reader.result; } if (input.files && input.files[0]) { reader.readAsDataURL(input.files[0]); } } </script> |
As you can see in the above code we have a simple html5 form
where the user can select
the image file and then we can live preview it as shown below