Jquery not working with file input for preview

Posted 1 month ago by muazzamazaz

I am using following code where image preview is required before uploading


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  

<div class="form-group has-feedback row {{ $errors->has('photo') ? ' has-error ' : '' }}">
                                {!! Form::label('photo_lbl', trans('destinations.photoLabelTitle'), array('class' => 'col-md-3 control-label')); !!}
                                <div class="col-md-9">
                                    <div class="input-group">
                                        {!! Form::file('photo[]', null, array('id' => 'photo_title', 'class' => 'form-control')) !!}      
                                        <img src="" id="photo_img" width="200px" />                                 
                                    </div>
                                    @if ($errors->has('photo'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('photo') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

Jquery:


function readURL(input) {

        if (input.files && input.files[0]) {

            var reader = new FileReader();

            

            reader.onload = function (e) {

                $('#photo_img').attr('src', e.target.result);

            }

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

        }

    }
$(document).ready(function() {
    $("#photo_title").change(function(){alert(3);

        readURL(this);

    });
});

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.