Skip to content

Instantly share code, notes, and snippets.

@malachi358
Created September 17, 2015 02:56
Show Gist options
  • Save malachi358/12c85fd443c28661f0ff to your computer and use it in GitHub Desktop.
Save malachi358/12c85fd443c28661f0ff to your computer and use it in GitHub Desktop.
Image Upload HTML5 Preview
<img id="preview" src="placeholder.png" height="100px" width="100px" />
<input type="file" name="image" onchange="previewImage(this)" accept="image/*"/>
<script type="text/javascript">
function previewImage(input) {
var preview = document.getElementById('preview');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
preview.setAttribute('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
} else {
preview.setAttribute('src', 'placeholder.png');
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment