javascript - Image preview before posting -
the upload button in picture below allows user choose photo. image should display , next button used post request.
i doing in following way:
<form class="form-horizontal" role="form" method="post" action='{{url::route('postimage')}}' runat="server"> <div class="form-group"> <label class='col-md-4 control-label'>profile picture</label> <div class='col-md-6'> <img src='/images/default.jpg' id='image' class="img-responsive img-circle img-thumbnail img_profile pull-left"> <input type="file" name='profile_picture' id="file_id" class='hidden' > <a href='#' class="btn btn-primary" onclick="document.getelementbyid('file_id').click(); return false;"><span class='glyphicon glyphicon-camera'></span> upload photo</a> </div> </div>
my js code follows:
function readurl(input) { if (input.files && input.files[0]) { var reader = new filereader(); reader.onload = function (e) { $('#image').attr('src', e.target.result); } reader.readasdataurl(input.files[0]); } } $("#file_id").change(function(){ readurl(this); });
the next button not working. simple button type submit. might wrong it? highly appreciate help.
Comments
Post a Comment