Can't upload the same image in the second time when remove it in the first

Question

I am doing a preview image, everything is working fine. However when I remove the image by click on an icon, the image remove and it's back to the first display, to select an image. However, when I try to add the same image, it's won't display. I thought I have some problem. But when I upload another image, it still works, and re-upload that image I want to add, it also works. And I remove and try to add that image again. I not work.
So if I re-up the same image on the second time, it's won't display. It only works image I upload other image and upload that I want to add early then its work. I want to add the same image when I remove it in the first time. Please help me! Thanks

HTML

<div class="upload_preview">
            <script src="js/upload.js"></script>
            <div class="upload_wrapper fade-in">
                <div class="choose_file_button_wrapper">
                    <button type="button" class="choose_file_button">
                        <span>Select Files</span>
                    </button>
                    <input type="file" multiple accept="image/gif,image/jpeg,image/png" id="file-input">
                    <div class="upload_note">
                        JPEG GIF PNG<br>
                        You can upload a file at once.
                    </div>
                </div>
                <ul class="image_container fade-in">
                    <li class="preview_image">
                        <div class="remove_image">
                            <i class="icon_close"></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

Jquery

$(document).ready(function(){
    $('.image_container').css('display', 'none');
    function readURL(input) {
        if (input.files && input.files[0]) {
          var reader = new FileReader();

        reader.onload = function(e) {
            $('.preview_image').css('background-image', 'url('+e.target.result +')');
            $('.preview_image').hide();
            $('.preview_image').fadeIn(650);
        }
        reader.readAsDataURL(input.files[0]);
        }
    }

    $("#file-input").change(function(){
        $('.image_container').css('display','inline-block');
        $('.choose_file_button_wrapper').css('display', 'none'); // From Stackoverflow answer
        readURL(this);
    });

    $(".remove_image").click(function(){
        $(".preview_image").css('background-image', '');
        $(".preview_image").css('display', 'none');
        $('.choose_file_button_wrapper').css('display','inline-block');
    });
});

Answer 1

you must have to clear file input value on remove_image event.

you can change

$(".remove_image").click(function(){
    $(".preview_image").css('background-image', '');
    $(".preview_image").css('display', 'none');
    $('.choose_file_button_wrapper').css('display','inline-block');
});

TO

$(".remove_image").click(function(){
    $(".preview_image").css('background-image', '');
    $(".preview_image").css('display', 'none');
    $('.choose_file_button_wrapper').css('display','inline-block');
    $("#file-input").val(''); 
});