Jquery not working with file input for preview

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 ">
  {!! 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></strong>
      </span>
    @endif
  </div>
</div>

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() {
    readURL(this);
  });
});

via Chebli Mohamed