JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://fonts.googleapis.com/css?family=Aguafina+Script"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/theme-default.min.css">
<link rel="stylesheet" href="https:https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.43/jquery.form-validator.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">
<div class="form-group">
          <label class="col-sm-4 control-label" for="seq">Sequence</label>
          <div class="col-sm-8">
            <input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-4 control-label" for="imgfile">Image file</label>
          <div class="col-sm-8">
            <input type="file" id="imgfile" data-validation="required mime size" data-validation-allowing="jpg, png, gif" data-validation-ratio="1:1"/>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-8 col-md-offset-4" id="image-holder">
         ...

JavaScript

$.validate({
    form: '#frmSlide',
    modules: 'file',
    validateOnBlur: false,
    errorMessagePosition: 'top', // Instead of 'element' which is default
    scrollToTopOnError: false, // Set this property to true if you have a long form
    onError: function($form) {
      alert('Failed!');
    },
    onSuccess: function($form) {
      alert('ok!');
      return false; // Will stop the submission of the form
    },
    onElementValidate: function(valid, $el, $form, errorMess) {
      console.log('Input ' + $el.attr('name') + ' is ' + (valid ? 'VALID' : 'NOT VALID'));
    }
  });

$("#imgfile").on('change', function() {
  var imgPath = $(this)[0].value;
  var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
  if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
    if (typeof(FileReader) != "undefined") {
      var image_holder = $("#image-holder");
      image_holder.empty();
      var reader = new FileReader();
      reader.onload = function(e) {
        $("<img />", {
          "src": e.target.result,
          "class": "thumb-image img-thumbnail"
        }).appendTo(image_holder);
      }
      image_holder.show();
      reader.readAsDataURL($(this)[0].files[0]);
    } else {
      alert("This browser does not support FileReader.");
    }
  } else {
    alert("Pls select only images");
  }
});