Skip to content

Instantly share code, notes, and snippets.

@mazfreelance
Last active April 13, 2018 01:51
Show Gist options
  • Save mazfreelance/6c1742e7823a7e60ab5240574b5d2c55 to your computer and use it in GitHub Desktop.
Save mazfreelance/6c1742e7823a7e60ab5240574b5d2c55 to your computer and use it in GitHub Desktop.
JS: preview images before submit photo
//html
<div id="imagepicture"><i id="fafaimage" class="fa fa-picture-o" aria-hidden="true"></i></div>
<input type="file" accept="image/*" name="image_upload_file" id="image_upload_file" required/>
//js
function filePreview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imagepicture + img').remove();
$('#imagepicture').after('<img src="'+e.target.result+'" width="150" height="120"/>');
$('#fafaimage').remove();
}
reader.readAsDataURL(input.files[0]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment