javascript - Adding delete button for each image thumbnail preview -


i want put next each thumbnail little cross able remove them 1 one. able remove image click on have seperate button "x" remove it.

fileinput.addeventlistener("change", function (e) {          var filesvar = this.files;          showthumbnail(filesvar);      }, false);        function showthumbnail(files) {         var file = files[0]          var image = document.createelement("img");         var thumbnail = document.getelementbyid("thumbnail");         image.file = file;          image.setattribute('class', 'imgklik5');         thumbnail.appendchild(image)          var reader = new filereader()         reader.onload = (function (aimg) {             return function (e) {                 aimg.src = e.target.result;             };         }(image))         var ret = reader.readasdataurl(file);         var canvas = document.createelement("canvas");         ctx = canvas.getcontext("2d");         image.onload = function () {             ctx.drawimage(image, 100, 100);         }     } }); 

here code in jfiddle

can me out, please?

see example close button:http://jsfiddle.net/kevalbhatt18/r0taz01l/1/

 $('div').on('click', '.closediv', function () {         $(this).prev().remove();         $(this).remove();         $('#upload-file').val("");     }); 

and made changes in showthumbnail function

 function showthumbnail(files) {         var file = files[0]         var thumbnail = document.getelementbyid("thumbnail");         var pdiv = document.createelement("div");         var image = document.createelement("img");         var div = document.createelement("div");           pdiv.setattribute('class', 'pdiv');         thumbnail.appendchild(pdiv);           image.setattribute('class', 'imgklik5');         pdiv.appendchild(image)          div.innerhtml = "x";         div.setattribute('class', 'closediv');         pdiv.appendchild(div).......         ................... 


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -