I am using an input file type multiple to upload multiple image and they will be previewed below the input section in a div. the previewed image all have a X button on which if it is pressed it will be removed. The previewed image on clicking X i removing them but when i do that and press submit even those images that are removed are also being submitted.
Here are some screenshots:
Screenshot for previewed image after adding images
Here i removed 1 image before submitting
Screenshot after pressing submit button
In this last screenshot it shows that all the 3 images are being uploaded even when i removed one of them. How can i get it to work??
<-- Html image upload -->
<input id="files" class="img-upload imagefet" type="file" name="upload_attachment[]" id="control" data-multiple-caption="{count} files selected" multiple/ >
<-- This is the div where the added images will be previewed -->
<div class="result-wrapper">
<div id="result">
</div>
The script I'm using
<script>
//Check File API support
var newImageObj = [];
if (window.File && window.FileList) {
var filesInput = $("#files");
filesInput.on("change", function (e) {
var files = e.target.files; //FileList object
var result = $("#result");
var pic_caption = $('#journalInputTitle').val();
var i = 1;
$.each(files, function (i, file) {
var pReader = new FileReader();
pReader.addEventListener("load", function (e) {
var pic = e.target;
result.append("<span class='thumbnail-wrapper thumbnail-wrapper" + i + "'><img class='thumbnail' src='" + pic.result + "'/><span class='thumbnail-category'>" + pic_caption + "</span><button class='remove' id='clear' onclick='removeDiv(this);'>×</button></span>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".thumbnail-wrapper").remove();
});
//show();
});
pReader.readAsDataURL(file);
i++;
newImageObj.push(file);
});
});
} else {
console.log("Not supported browser");
}