Я использую следующий метод для загрузки изображения и отображения его в теге 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>
Поле вашего файла не запускает событие 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>
Это работает хорошо . Спасибо . Но я не понимаю смысла этой строки $('#file').val('');
чтобы вызвать функцию onchange = "loadFile(event)"
в вашем теге #file, это функция, которую вы используете для отображения изображения. Ваша кнопка удаления никогда не изменяет содержимое #file, она по-прежнему содержит «удаленное» изображение, поэтому она никогда не запускала событие «onchange».
большое спасибо. Я ценю вашу помощь мне.
Ваш фрагмент кода отлично работает для меня. Хотя, когда вы добавляете изображение после удаления, ширина и высота не устанавливаются.