"Show Uploaded Files"
Bootstrap 4.1.1 Snippet by abhijeetka

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>ShowMyFiles</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> </head> <body> <form class="col-md-12"> <div class="col-md-5 py-2"> <input id="uploadFile" class="form-control col-12 m-0 form-control-sm" type="file" name="uploadFile[]" multiple="multiple"/> <div id="file_count" class="mt-2 mb-3 btn btn-sm badge-primary"># Files selected: <span class="badge badge-light ml-1 p-1">0</span></div><br> <div class="card-body m-0 rounded shadow" id="upload_prev"></div> </div> </form> </body> </html>
.filenameupload { width:98%; } #uploadFile{ text-indent:-25px; font-size:0; height:35px; /*width:150px;*/ margin:0 8px; background:#efefef; border:1px solid #cfcfcf; } #upload_prev { border:1px solid #cfcfcf; margin:0; width:550px; } #upload_prev span { padding:3px 5px 4px; font-family:calibri; border:1px solid #efefef; font-size:12px; display:flex; } #upload_prev span b{margin:0 12px; float:right;} #upload_prev span .close { border: 1px solid #efefef; border-radius: 50px; padding: 2px 5px; display: inline-block; font-size: 11px; background: #f38600; color: #fff; margin:0; }
var updatedList = []; $(document).ready(function(){ $('#upload_prev').html('No Files Uploaded Here...'); $('#uploadFile').on('change', function() { updatedList = updatedList.splice(0,0); $('#upload_prev').html(''); var filename = this.value; var lastIndex = filename.lastIndexOf("\\"); if (lastIndex >= 0) { filename = filename.substring(lastIndex + 1); } var files = $('#uploadFile')[0].files; $('#file_count > span').text(files.length); for (var i = 0; i < files.length; i++) { $("#upload_prev").append('<span>' + '<div class="filenameupload">' + files[i].name + '<b>'+ parseInt(files[i].size ) +' KB</b></div>' + '<p class="close" >X</p></span>'); updatedList.push(files[i].name); } $(document).on('click', '.close', function() { $(this).parents('span').remove(); var getListCnt = $('#upload_prev span').length; $('#file_count > span').text(getListCnt); alert(getListCnt + ' > '+files[getListCnt].name); alert(updatedList.length); $('#upload_prev').append('No Files Uploaded Here...'); }); }); });

Related: See More

Rotating CSS Card
Creating password field text hide show via a single class
Show Dropdown Hover & Caret Up

Questions / Comments: