Validación y previsualización de imagen antes de subirla por formulario

A través de JavaScript (jQuery) se puede realizar una validación de una imagen previo a ser subida al servidor e inclusive mostrarla como una previsualización dentro de la misma página HTML.

var mb = 10;
var bites = Math.floor(mb * 1048576);

$(document).on('change', '#frm_add .photo', function(){
  var imagen = this.files[0];
  if(imagen['type'] !== 'image/jpeg' && imagen['type'] !== 'image/png') {
    $('#frm_add .photo').val('');
    $('#frm_add #lbl_photo').html('Seleccionar archivo');
    $('#frm_add .previsualizar').attr('src', 'vistas/img/sin_imagen.png');
    swal({
      title: 'Error de imagen',
      html: 'El archivo no corresponde al tipo de imagen permitida. <br>Tipo de imágenes permitidas <b>JPG</b> o <b>PNG</b>.',
      type: 'error',
      confirmButtonText: 'Cerrar'
    });
  } else if (imagen['size'] > bites){
    $('#frm_add .photo').val('');
    $('#frm_add #lbl_photo').html('Seleccionar archivo');
    $('#frm_add .previsualizar').attr('src', 'vistas/img/sin_imagen.png');
    swal({
      title: 'Error de imagen',
      html: 'El archivo excede el tamaño máximo permitido (' + Math.round((imagen['size'] / 1048576)*100) / 100 + 'Mb).<br>Tamaño máximo permitido <b>' + mb + 'MB</b>.',
      type: 'error',
      confirmButtonText: 'Cerrar'
    });
  } else {
    var datosImagen = new FileReader;
    datosImagen.readAsDataURL(imagen);
    $('#frm_add #lbl_photo').html(imagen['name']);
    $(datosImagen).on('load', function(e){
      var rutaImagen = e.target.result;
      $('#frm_add .previsualizar').attr('src', rutaImagen);
    });
  }
});

Se utiliza la librería SweetAlert2 (swal({});) para mostrar mensajes de alerta. SweetAlert2 v7.29.0