Javascript - 所选图像未显示

Question

在我的 JS 文件中，我检查用户何时选择文件，并在浏览器中显示该图像。然后，我允许用户删除所选图像，而是在浏览器中显示默认图像的图像。

我遇到的问题是，一旦用户通过单击删除文本删除图像，他们就无法选择他们想要的文件。这是出乎意料的。

HTML:

// Label for file input (file input is generated in backend)
<label id="complete-signup-photo-label" for="complete_signup_photo">Choose a profile photo</label>

// Image displayed in browser(should display image user selects from file input above)
<img id="complete-signup-photo-img" width="40px" height="40px" src="{% static 'default-profile.png' %}" alt="">
// User should be able to click, and src of selected file changes to a default image
<span id="complete-signup-remove-photo">Remove</span>

我的JS文件:

img = $("#complete-signup-photo-img");

// This is my file inputs id (generated in my backend)
$("#complete_signup_photo").change(function(e) {
    var url = URL.createObjectURL(e.target.files[0]);

    img.attr('src', url);
});

$("#complete-signup-remove-photo").click(function(e) {
    img.attr("src", "http://localhost:8000/static/default-profile.png"); 
});

有人知道为什么会发生这种情况吗？谢谢。

Answer 1

您是否尝试初始化文件输入？

$("#complete-signup-remove-photo").click(function(e) {
    img.attr("src", "http://localhost:8000/static/default-profile.png"); 
    $("#complete_signup_photo").val("");
});