laravel загрузка изображения с использованием ajax

Question

У меня есть одна проблема в моем коде. когда я нажимаю кнопку обновления, изображение не загружается в серверную часть и в консоли выводится сообщение об успешном завершении, но значение изображения возвращает ноль Кто-нибудь может исправить это решение. Я был бы очень признателен, если бы вы могли это. Здесь я вставил свой код лезвия со скриптом, пожалуйста, проверьте это

<div class="row">
    @foreach($client as $clie)
       <div class="col-4">
            <div class="form-group">
               <label for="clientimage">Logo #{{$loop->index+1}}</label>
               <input type="file" class="form-control-file" name="image" id="clientimage{{$clie->id}}">
               <small id="emailHelp" class="form-text text-muted">JPEG, PNG only</small>
            </div>
            <button type="submit" class="btn btn-primary float-right" onclick="updateImage({{$clie->id}})">update</button>
        </div>
    @endforeach
</div>

Это мой код скрипта

<script>
    function updateImage(id){
        var image = $('#clientimage' + id).val();
        // var subtext =  $('#subtext').val();
         $.ajax({
            headers: {
                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             },
            type: 'PUT',
            dataType: 'json',
            data: {image:image},
            url: `/cms/companyClient/${id}`,
            success: function( _response ){
                console.log(_response);
                console.log("file uploaded");
            },
            error: function( _response ){
                console.log(_response);
            }
         });
    }
</script>

Answer 1

try it my code 

<script type="text/javascript">

    $(document).ready(function (e) {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#image').change(function(){

            let reader = new FileReader();
            reader.onload = (e) => { 
              $('#image_preview_container').attr('src', e.target.result); 
            }
            reader.readAsDataURL(this.files[0]); 

        });

        $('#upload_image_form').submit(function(e) {
            e.preventDefault();

            var formData = new FormData(this);

            $.ajax({
                type:'POST',
                url: "{{ url('your ulr')}}",
                data: formData,
                cache:false,
                contentType: false,
                processData: false,
                success: (data) => {
                    this.reset();
                    alert('Image has been uploaded successfully');
                },
                error: function(data){
                    console.log(data);
                }
            });
        });
    });

</script>