使用ajax上传laravel图片

Question

I have one problem in my code. when I click on update button it does not upload an image in backend and in console message success is passed but image value it return null. can anyone fix this solution. I would be very grateful if you could this. Here I have paste my blade code with script plz check this

<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>

THis is my script code

<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>