javascript - Select, Preview, Remove multiple images before uploading -


i don't know jquery , javascript know possible it. can preview , remove selected image before click on submit button upload (example: facebook on status upload images). want when user selects single or multiple images when clicked on <input type="file" name="images[]" multiple="multiple"> want preview images 'x' button on top right corner of images on clicked closes preview , removes actual image selected list prevent uploading. heard need take array of selected images remove them selected list said not in jquery , javascript.

i have code below gives preview of selected images , removes preview when clicked on 'x'. removing preview , not actual image list. i want remove actual image list main problem facing. code till now:

$(document).ready(function(){      $("#file-5").on('change',function() {      var filelist = this.files;      for(var = 0; < filelist.length; i++){           var t = window.url || window.webkiturl;           var objecturl = t.createobjecturl(filelist[i]);           $('.removeimg').fadein();           $('#imgs').append('<span class="img_'+i+'" onclick="del('+i+')" style="cursor:pointer; margin-right: 3px;"><b>x</b></span><img class="img_'+i+'" src="' + objecturl + '" width="150" height="150" style="margin-right: 3px;">');           j = i+1;           if(j % 3 == 0)           {             $('#imgs').append('<br>');           }         }     }); }); function del(i){      $('.img_'+i).fadeout("slow", function() {          $('.img_'+i).remove();     }); } 


Comments

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -