Image preview before upload using jQuery

Javacsript and jquery

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

  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" />

// 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

Back To Top