I have a multiple image file input. There is a preview thumbnail for each selected file with delete thumbnail icon. But this icon removes only thumbnail. I need this icon do delete thumbnail preview and an actual uploaded image. Please, help me to do it. Thank you in advance!!
window.onload = function() {
//Check File API support
if (window.File && window.FileList && window.FileReader) {
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function(event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
//Only pics
if (!file.type.match('image'))
continue;
var picReader = new FileReader();
picReader.addEventListener("load", function(event) {
var picFile = event.target;
var div = document.createElement("div");
div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
"title='" + picFile.name + "'/> <a class='remove_pict'>X</a>";
output.insertBefore(div, null);
div.children[1].addEventListener("click", function(event) {
div.parentNode.removeChild(div);
});
});
//Read the image
picReader.readAsDataURL(file);
}
});
} else {
console.log("Your browser does not support File API");
}
}<form>
<article>
<label for="files" class="upload_multiple_photos">Select files...</label>
<input id="files" type="file" name="my-file" value="" accept="image/png, image/gif, image/jpeg" multiple/>
<output id="result" />
</article>
<input id="submit" type="submit" value="Submit">
</form>