第一次删除时无法第二次上传相同的图像答案

【问题标题】：Can't upload the same image in the second time when remove it in the first第一次删除时无法第二次上传相同的图像
【发布时间】：2019-05-04 18:38:03
【问题描述】：

我正在做一个预览图像，一切正常。但是，当我通过单击图标删除图像时，图像会删除并返回到第一个显示，以选择图像。但是，当我尝试添加相同的图像时，它不会显示。我以为我有问题。但是当我上传另一张图片时，它仍然有效，然后重新上传我要添加的图片，它也有效。然后我删除并尝试再次添加该图像。我不工作。
因此，如果我第二次重新上传相同的图像，它将不会显示。它只适用于我上传其他图像并上传我想在其工作之前添加的图像。我想在第一次删除它时添加相同的图像。请帮我！谢谢

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');
    });
});

【问题讨论】：

标签： jquery html

【解决方案1】：

您必须在remove_image 事件中清除file 输入value。

你可以改变

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

到

$(".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(''); 
});

【讨论】：