Rails form Images -


this form :

<%= form_for @user, validate: true |f| %>  <div class="well-lg">   <h4>personal details</h4>   <div class="form-group">     <%= f.label :role %> <br />     <%= f.select :role, options_for_role, {}, prompt: 'select one',:class=> 'form-control' %>   </div>   <div class="form-group">     <%= f.label :first_name %><br />     <%= f.text_field :fname, :class=> 'form-control' %>   </div>   <div class="form-group">     <%= f.label :last_name %><br />     <%= f.text_field :lname, :class=> 'form-control' %>   </div>   <div class="form-group">     <%= f.label :email_address %><br />     <%= f.email_field :email, :class=> 'form-control' %>   </div>   <div class="form-group">      <%= f.label :upload_image %><br />     <%= f.file_field :orgimg, :class => 'fileupload' %>        <div id = 'dvpreview>        </div>   </div> </div> <% end %> 

everything works fine wanted preview image uploaded in form how can add image_tag file field or there other solution??

thanks !!!

by using following code , able preview image while uploading

<script language="javascript" type="text/javascript">   $(function () {       $(".fileupload").change(function () {           if (typeof (filereader) != "undefined") {               var dvpreview = $("#dvpreview");               dvpreview.html("");               var regex = /^([a-za-z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;               $($(this)[0].files).each(function () {                   var file = $(this);                   if (regex.test(file[0].name.tolowercase())) {                       var reader = new filereader();                       reader.onload = function (e) {                           var img = $("<img />");                           img.attr("style", "height:100px;width: 100px");                           img.attr("src", e.target.result);                           dvpreview.append(img);                       }                       reader.readasdataurl(file[0]);                   } else {                       alert(file[0].name + " not valid image file.");                       dvpreview.html("");                       return false;                   }               });           } else {               alert("this browser not support html5 filereader.");           }       });   }); 


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -