$(".mode-remove").click(function(){

                $(".imagePreview").attr("src","{{asset('images/default.png/')}}");

            });

            $('.mode-remove').click(function() {

                $.ajaxSetup({

                    headers: {

                        'X-CSRF-TOKEN': "{{ csrf_token() }}"

                    }

                });

                $.ajax({

                    type: "delete",

                    url: "{{ route('styles.remove_background_image', [currentAccount(), currentProject()]) }}",

                    success: function(){

                        console.log('Background Image Removed Successfully');

                    }

​

                });

            });

        });

    </script>

@endpush

HTML:

​

<form id="form1" runat="server">

   <input type='file' id="imgInp" />

   <img id="blah" src="#" alt="your image" />

</form>

jQuery

​

function readURL(input) {

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

        var reader = new FileReader();

​

        reader.onload = function (e) {

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

        }

​

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

    }

}

​

$("#imgInp").change(function(){

    readURL(this);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<form action="" method="post">

    <input type="file" name="file_icon" id="file_icon" onChange="loadInfo(event)">

    <label id="file_icon_name"></label>

    <img id="display_icon" src="#" />

</form>

var loadInfo = function(e){

    document.getElementById('display_icon').src = URL.createObjectURL(e.target.files[0]);

    $('#file_icon_name').html(e.target.files[0].name);

};

// i test is ok @.@ very good short code