"File Upload"
Bootstrap 3.3.0 Snippet by hyxer

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<div class="col-lg-6 col-sm-6 col-12">
<h4>File Upload</h4>
<form class="form-inline center-block well" action="/" method="POST" enctype="multipart/form-data">
<div class="input-group">
<label id="browsebutton" class="btn btn-default input-group-addon" for="my-file-selector" style="background-color:white">
<input id="my-file-selector" type="file" style="display:none;">
Browse...
</label>
<input id="label" type="text" class="form-control" readonly="">
</div>
<button type="submit" class="btn btn-primary">Upload</button>
<span class="help-block">
<small id="fileHelp" class="form-text text-muted">Only CSV with size less than 2MB is allowed.</small>
</span>
</form>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
$(document).ready(function(){
$('#browsebutton :file').change(function(e){
var fileName = e.target.files[0].name;
$("#label").attr('placeholder',fileName)
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: