Upload image with preview and delete option - Javascript / JQuery

Question

I have the code below that works fine and uploads multiple images.

This is the html and jQuery code:

<div class="field" align="left"> <span> <h3>Upload your images</h3> <input type="file" id="files" name="files[]" multiple /> </span> </div> 

The script looks like this:

 <style> input[type="file"] { display:block; } .imageThumb { max-height: 75px; border: 2px solid; margin: 10px 10px 0 0; padding: 1px; } </style> <script type="text/javascript"> $(document).ready(function() { if(window.File && window.FileList && window.FileReader) { $("#files").on("change",function(e) { var files = e.target.files , filesLength = files.length ; for (var i = 0; i < filesLength ; i++) { var f = files[i] var fileReader = new FileReader(); fileReader.onload = (function(e) { var file = e.target; $("<img></img>",{ class : "imageThumb", src : e.target.result, title : file.name }).insertAfter("#files"); }); fileReader.readAsDataURL(f); } }); } else { alert("Your browser doesn't support to File API") } }); </script> 

The code adds multiple images and shows image previews. But now I want that when the user clicks on a button, allows deleting on each uploaded image, it should be deleted. Not tucked away.

Any help on this would be appreciated!

Answer 1

Try adding this: .click(function(){$(this).remove();}); . He will delete the image by clicking it.

EDIT Improved version.

 $(document).ready(function() { if (window.File && window.FileList && window.FileReader) { $("#files").on("change", function(e) { var files = e.target.files, filesLength = files.length; for (var i = 0; i < filesLength; i++) { var f = files[i] var fileReader = new FileReader(); fileReader.onload = (function(e) { var file = e.target; $("<span class=\"pip\">" + "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + "<br/><span class=\"remove\">Remove image</span>" + "</span>").insertAfter("#files"); $(".remove").click(function(){ $(this).parent(".pip").remove(); }); // Old code here /*$("<img></img>", { class: "imageThumb", src: e.target.result, title: file.name + " | Click to remove" }).insertAfter("#files").click(function(){$(this).remove();});*/ }); fileReader.readAsDataURL(f); } }); } else { alert("Your browser doesn't support to File API") } }); 

 input[type="file"] { display: block; } .imageThumb { max-height: 75px; border: 2px solid; padding: 1px; cursor: pointer; } .pip { display: inline-block; margin: 10px 10px 0 0; } .remove { display: block; background: #444; border: 1px solid black; color: white; text-align: center; cursor: pointer; } .remove:hover { background: white; color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="field" align="left"> <h3>Upload your images</h3> <input type="file" id="files" name="files[]" multiple /> </div> 

Answer 2

Use this to delete file values ​​and view files.

 $(".remove").click(function(){ $(this).parent(".pip").remove(); $('#files').val(""); });`