Image preview before upload using jQuery.
Show the image before uploading it on the server using jQuery, This article explains how to preview an image before uploading.
Allowed File Extensions while image upload using “allowedFileExtensions“
HTML code
<input type="file" class="form-control" id="file_attache" placeholder="file attache" name="file_attache">
jQuery code
$("#file_attache").fileinput({
overwriteInitial: true,
maxFileSize: 2500,
showClose: false,
showCaption: false,
browseLabel: '',
removeLabel: '',
browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',
removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
removeTitle: 'Cancel or reset changes',
elErrorContainer: '#kv-avatar-errors-1',
msgErrorClass: 'alert alert-block alert-danger',
defaultPreviewContent: '<img src="assests/images/photo_default.png" alt="Profile Image" style="width:100%;">',
layoutTemplates: {main2: '{preview} {remove} {browse}'},
allowedFileExtensions: ["jpg", "png", "gif", "JPG", "PNG", "GIF", "pdf"]
}); Another code for the Image preview before upload using jQuery
// HTML code
<form runat="server">
<input accept="image/*" type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
// JS code
imgInp.onchange = evt => {
const [file] = imgInp.files
if (file) {
blah.src = URL.createObjectURL(file)
}
}Like us on Facebook and Linkedin for more updates.
Related: Print HTML Content Using JavaScript
