How to preview image before uploading in jQuery

• Preview image in BLOB URL format on change input type file

  <!-- Image Preview on choose file  in BLOB url format -->
  <input type="file" name="image" id="image"/>
  <div id="previewWrapper" style="height:200px; width:300px;">
      <img id="previewImage" style="height:100%; width:100%;">
  </div>
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
      $(document).ready(function(){
          $("body").on("change", "#image", function(e){
              previewImage(this, 'previewImage');
          });
      })
      
      function previewImage(input, targetDivToShow) {
          var files = input.files;
          var url;
          var done = function (url) {
              $('#'+targetDivToShow).attr('src', url);
          };
          
          if (input.files && input.files[0]) {
              file = input.files[0];
              if (URL) {
                  done(URL.createObjectURL(file));
              } else if (FileReader) {
                  var reader = new FileReader();
                  reader.onload = function (e) {
                      done(reader.result);
                  }
                  reader.readAsDataURL(file);
              }
          }
      }
  </script>
  

• Display image in base64 format on change input file

  <!-- Preview image in base64 formats -->
  <input type="file" name="image" id="image"/>
  <div class="previewWrapper" style="height:200px; width:300px;">
      <img id="previewImage" style="height:100%; width:100%;">
  </div>
  
  <!-- Script --> 
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
      $(document).ready(function(){
          $("body").on("change", "#image", function(e){
              var file = e.target.files[0];
              var mediabase64data; 
              getBase64(file).then(
                  mediabase64data => $('#previewImage').attr('src', mediabase64data)
              );
          });
      })
      
      function getBase64(file) {
          return new Promise((resolve, reject) => {
              const reader = new FileReader();
              reader.readAsDataURL(file);
              reader.onload = () => resolve(reader.result);
              reader.onerror = error => reject(error);
          });
      }
  </script>
  

Back to code snippet queries related jquery