Skip to content

Instantly share code, notes, and snippets.

@MistrySaurabh

MistrySaurabh/multiple_file_input_with_delete.html

Created March 6, 2018 17:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MistrySaurabh/7e08412403ed61f0c47e43dcb52d38dd to your computer and use it in GitHub Desktop.
Save MistrySaurabh/7e08412403ed61f0c47e43dcb52d38dd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
multiple_file_input_with_delete.html
<html>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<input id="file" type="file" name="files[]" accept=".jpg,.jpeg,.png" multiple/>
<div id="preview"></div>
</html>
<script>
var finalFiles = {};
$(document).on('change','#file',function(e){
var files = e.target.files; //FileList object
finalFiles = {};
var fileNum = this.files.length,
i = 0,
counter = 0;
$.each(this.files,function(idx,elm){
finalFiles[idx]=elm;
});
for (i; i < fileNum; i++) {
counter = counter + 1;
$('#preview').append('<div id="file_'+ i +'">'+counter+"==="+ this.files[i].name + '&nbsp;&nbsp;<span class="fa fa-times-circle fa-lg closeBtn"></span></div>');
}
/* $.each(files, function(i, file) {
var reader = new FileReader();
reader.onload = function (e) {
var img='<img src="'+e.target.result+'" style="height:150px;">';
$('#preview').append(img);
}
reader.readAsDataURL(file);
});*/
});
$(document).on('click','.closeBtn',function()
{
var container = $(this).closest('div');
var index = container.attr("id").split('_')[1];
container.remove();
delete finalFiles[index];
console.log(finalFiles);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment