Thursday, 10 May 2018

PREVIEW AN IMAGE AND VIDEO BEFORE IT IS UPLOADED

Please take a look at the sample JS code below:

<script type="text/javascript">
  function readURL(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
    $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
    }
  }

  $("#imgInp").change(function(){
    readURL(this);
  });
</script>


and the associated HTML:


<div class="field">
    <%= form.label :image %>
    <%= form.file_field :image,  id: "imgInp" %>
    <img id="blah" src="#" alt="your image" style="height: 150px; width: 200px;" />
  </div>


================================================================

Preview Video Before Saving



We can follow :-


No comments:

Post a Comment