Bootstrap change the Upload file button style and display the uploaded filename

Reference blog:
HTML, the style customization used when uploading files <input type="file">


The <input type="file"> default style in HTML is ugly, using the style of the bootstrap button, and getting the filename to appear on its right

Gossip less, directly on the code:

<LabelFor="Jobdata"class="Control-label"style="FLOAT:LEFT;PADDING-LEFT:15PX;" > Task Data</Label><Divclass="Col-xs-12 col-sm-4 col-md-4" ><Divclass="File-container"style="Display:inline-block;position:relative;overflow:hidden;vertical-align:middle" ><buttonclass="Btn btn-success Fileinput-button"Type="button" > Upload</Button><InputType="File"Id="Jobdata"Onchange="LoadFile (This.files[0])"style="POSITION:ABSOLUTE;TOP:0;LEFT:0;FONT-SIZE:34PX; Opacity:0 "></div> <span id="filename" style="vertical-align:middle" > file not uploaded </span></div><script>function loadFile (file) {$$ (" #filename "). HTML (file.name);} </script>                 

Before uploading a file:

After uploading the file:

Bootstrap Change the Upload file button style and display the uploaded filename