再次上传时，图像不显示在 img 标签中

Question

我使用下面的方法上传一张图片，并显示在一个img标签中。另一个按钮用于删除该图像。上传和删除工作正常，但问题是当我想在删除图像后再次上传图像时。它没有显示出来，当我打开控制台时，它没有找到图像 src。仅当我使用删除按钮删除图像时才会出现此问题。

 var loadFile = function(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
    };

    function deleteFile() {
        var image = document.getElementById('output');
        image.parentNode.removeChild(image);
        var img = document.createElement("img");
        img.id = "output";
        $("#p_img").append(img);
    }


   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button><label for="file">Upload Image</label </button>
    <button onclick="deleteFile()">Delete</button>
    <p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
     <p id="p_img"><img id="output" height="200" width="200"></p>

Answer 1

您的文件字段在删除后未触发“onchange”事件，解决此问题的一种方法是在您的删除方法中手动触发它。

var loadFile = function(event) {
        var image = document.getElementById('output');
        image.src = URL.createObjectURL(event.target.files[0]);
    };

    function deleteFile() {
        var image = document.getElementById('output');
        image.parentNode.removeChild(image);
        var img = document.createElement("img");
        img.id = "output";
        $('#file').val('');
        $("#p_img").append(img);
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button><label for="file">Upload Image</label </button>
    <button onclick="deleteFile()">Delete</button>
    <p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
     <p id="p_img"><img id="output" height="200" width="200"></p>