how to upload image with ajax and laravel?

I want to save an image with ajax and laravel but I get an error in js, and I think it's because the image is not saved.

view

<div 
  class="modal fade" 
  id="exampleModal" 
  tabindex="-1" 
  role="dialog" 
  aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="row">
          <div class="col-sm-12 b-r"><h3 class="m-t-none m-b">CREAR SLIDER</h3>

            <div class="hr-line-dashed"></div>

            {!! Form::open(['method' => 'POST','route' => ['inicio.actualizarSler','id'], 'files' => true,'id'=>'form-editarslider']) !!}

            <input type="hidden" id="idslider" name="idslider">
            <meta name="csrf-token" content="{{ csrf_token() }}">
            <div class="form-group"><label>Titulo</label> <input 
              type="text" id="tituloEditar" 
              name="tituloEditar" 
              placeholder="Ingrese titulo" class="form-control"></div>
            <div class="form-group"><label>Subtitulo</label> <input 
              type="text" 
              id="subtituloEditar" 
              name="subtituloEditar" 
              placeholder="Ingrese subtitulo" class="form-control"></div>
            <input 
              type="hidden" 
              id="idMenu" 
              name="idMenu" value="{{ $menu->idMenu  }}">

            <div class="form-group"><label>URL</label> <input 
              type="text" 
              id="descripcionEditar" 
              name="descripcionEditar" 
              placeholder="Ingrese enlace" class="form-control"></div>
            <div class="form-group">

              <div class="form-group">
                {!! Form::file('rutaImagenSlider',['id'=>'file-rutaImagenSlider']) !!}
                <img name="rutaImagenSlider" 
                  src="" id="rutaImagenSlider" style="width: 50%;"/>
              </div>
            </div>

            {!! Form::close() !!}

            <div>
              <button 
                onclick="guardarSlider();" 
                class="btn btn-sm btn-primary pull-right m-t-n-xs" 
                type="submit"><strong>REGISTRAR</strong></button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

JS and AJAX

<script>
function readURL(input, id) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

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

    reader.readAsDataURL(input.files[0]);
  }
}
function readURLin(input, id) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#' + id).attr('value', e.target.result);
    }

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

$(document).ready(function() {

  $('#summernote').summernote({
    height: "200px",
  });


  $('#summernote1').summernote({
    height: "200px",
  });

  $('#summernote2').summernote({
    height: "200px",
  });

});

function mostrarEditarSlider(id,titulo,subtitulo,enlace,ruta_imagen) {
  $("#tituloEditar").val(titulo);
  $("#subtituloEditar").val(subtitulo);
  $("#descripcionEditar").val(enlace);
  $("#idslider").val(id);

  document.getElementById("rutaImagenSlider").src = '../../storage/'+ruta_imagen;
  $("#file-rutaImagenSlider").change(function () {
    readURL(this, 'rutaImagenSlider');
    readURLin(this, 'salvacion');
  });

  $("#exampleModal").modal();
}

function guardarSlider() {

  var form =  $("#form-editarslider");

  //datos

  var idslider = $("#idslider").val();
  ///   var token = $("#_token").val();
  var file  = $("#file-rutaImagenSlider").val();
  var titulo = $("#tituloEditar").val();
  var subtitulo = $("#subtituloEditar").val();
  var enlace  =  $("#descripcionEditar").val();
  var idMenu = $("#idMenu").val();
  //  alert(file);return;

  var datos = {
    'titulo' :titulo,
    'file' : file,
    'idslider' : idslider,
    'subtitulo' : subtitulo,
    'enlace' : enlace,
    'idMenu' : idMenu
  };
  var urles = form.attr('action').replace('id',$("#idslider").val());
  var formdata = form.serialize();

  // console.log(datos);return;
  $.post({
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    url: urles,
    data:datos,
    dataType: 'json',
    success : function (res) {
      console.log(res);
    }
  })
}

</script>

CONTROLLER

public function actualizarSler(Request $request)
{
  $slider = Detalle_imagen::find($request->cod);
  $slider->titulo = $request->titulo;
  $slider->subtitulo = $request->subtitulo;
  $slider->enlace = $request->enlace;

  if (isset($request->file)) {
    $file = $request->file('file');
    $slider->rutaImagen =  $file->getClientOriginalName();
    \Storage::disk('local')->put( $slider->rutaImagen,  \File::get($file));
  } else {
    $res="chau";
  }

  $slider->save();

  //$res="chau";
  return response()->json($slider->rutaImagen);
}