再次上傳時，圖像不顯示在 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”事件，go 的一種方法是在您的刪除方法中手動觸發它。

 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>