image is not show in img tag when upload it again

Question

I use the following method to upload an image and display it in an img tag. Another button is used to delete that image. Upload and delete are working well, but the problem is when I want to upload an image again after it has been deleted. It does not be show up and when I open the console it did not find the image src. The problem occurs only when I delete the image using the delete button.

 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>

Your code snippet works fine for me. Although when you add the image after deleting, the width and height don't get set. — Will Taylor, Dec 19 '20 at 06:46
https://stackoverflow.com/questions/5194924/does-removechild-really-delete-the-element https://stackoverflow.com/questions/6802683/js-how-to-remove-image-with-javascript https://stackoverflow.com/questions/46790038/deleting-the-selected-images-from-the-image-upload-array-not-just-the-preview — react_or_angluar, Dec 19 '20 at 06:51

score 0 · Accepted Answer · answered Dec 19 '20 at 07:01

Your file field isn't triggering the 'onchange' event after delete, one way to go about this is to trigger it manually in your delete method.

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>

It works well . thank you . But I do not understand the meaning of that line $('#file').val(''); — Mustafa Montaser, Dec 19 '20 at 11:54
to trigger the `onchange="loadFile(event)"` func on your '#file' tag, that is the function you use to display the image. Your delete button never changes the content of the #file, it still contains the 'deleted' image, so it never triggered the 'onchange' event. — Toxnyc, Dec 19 '20 at 15:14

image is not show in img tag when upload it again

1 Answers1