How to do everything with one click?

Question

JavaScript

Good day.
There is a site: u0763918test1.isp.regruhosting.ru
When you select a file and click on the Upload button, the picture is uploaded to the server, the second time you click on the Upload button, the gray block is updated and we see this picture. How to make it happen with one click?

<script>
    $(document).ready(function(){

        $("#but_upload").click(function(){

            var fd = new FormData();
            var files = $('#file')[0].files[0];
            fd.append('file',files);

            $.ajax({
                url: 'upload.php',
                type: 'post',
                data: fd,
                contentType: false,
                processData: false,
                success: function(response){
                    if(response != 0){
                        $("#img").attr("src",response);
                        $(".preview img").show(); // Display image element
                    }else{
                        alert('file not uploaded');
                    }
                },
            });
            $.post('gallery.php', {refresh:'but_upload'}, function success(data){
                $('#img-box').html(data);
            });
            return false;
        });
    });
</script>

Answer 1