How to apply css styles to file upload control

So many developers are facing this type of problems always while creating pages with asp.net upload control or normal html upload control. Because entire page looks so good except upload control.

To overcome this problem we browse google and searched so many blogs, And finally we got an idea. i.e To make file upload control more attractive css is only not enough, along with that we take help of Jquery and Bootstrap.

file upload design=css+ Bootstrap + Jquery

Procedure

Step1:

Add a file upload control in your webpage

<--file control added -->
<input type="file" id="Uploadfile" />

Step2:

Now just add bootstrap css in your webpage webpage <heade&rt; tag like show bellow.(to download Bootstrap please Click here.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>

Step3:

In Bootstrap we have input group controls based on it just create a input group control in your webpage like show bellow.(to view bootstrap input group controls please click here.

<--file control added -->
<input type="file" id="Uploadfile" />
<--Bootstrap div added -->
<div class="input-group">
<input id="fileone" type="text" class="form-control" placeholder="No file Selected" disabled="disabled">
<span class="input-group-btn">,br/> <a href="javascript:void(0);" class="btn btn-warning" onclick="uploadme();">Select File</a> </span> </div>

Step4:

Now add style display:none property to your UploadFile control

<--file control added -->
<input type="file" id="Uploadfile" style="display:none;" />
<--Bootstrap div added -->
<div class="input-group">
<input id="fileone" type="text" class="form-control" placeholder="No file Selected" disabled="disabled">
<span class="input-group-btn">,br/> <a href="javascript:void(0);" class="btn btn-warning" onclick="uploadme();">Select File</a> </span> </div>

Step5:

Then add a javascript function to Select File button onclick event

<script type="text/javascript">
function uploadme(index) {
$('#Uploadfile').click();
}
<script/>

Output:

Here we go the beautiful file upload control is ready.

Note: Now you can only select the file by clicking Select File Button. In order to show file name in the control you need to follow the bellow steps.

Step6:

Add these scripts to your page

function splitpath(paths) {
var st = paths.split("\\");
return st[st.length - 1];
}
function updatemyname() {
var varfile = document.getElementById("Uploadfile");
document.getElementById("fileone").value = splitpath(varfile.value);
}

Step7:

Add an onchange event to file upload control.

<input type="file" id="Uploadfile" style="display:none;" onchange="updatemyname();" />

 

Conclusion:

Hope you understand my concept. Thank you very much.

Download

Please click the link to download