"Show Uploaded Files"
Bootstrap 4.1.1 Snippet by abhijeetka

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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...');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: