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

Question

我正在预览图像，一切都很好。然而，当我点击图标删除图像时，图像会被删除，然后返回到第一个显示，以选择图像。然而，当我尝试添加相同的图像时，它不会显示。我觉得我有点问题。但当我上传另一张图片时，它仍然有效，并且重新上传我想添加的图片时，也有效。我删除并尝试再次添加该图像。我不工作
所以，如果我第二次刷新同一张图片，它将不会显示。它只适用于我上传的其他图像和上传的图像，我想提前添加它的工作。我想在第一次删除时添加相同的图像。请帮帮我！感谢

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

您必须在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(''); 
});