Skip to content

Instantly share code, notes, and snippets.

@davist11
Created October 25, 2010 21:32
Show Gist options
  • Save davist11/645816 to your computer and use it in GitHub Desktop.
Save davist11/645816 to your computer and use it in GitHub Desktop.
Fancy File Inputs
var SITE = SITE || {};
SITE.fileInputs = function() {
var $this = $(this),
$val = $this.val(),
valArray = $val.split('\\'),
newVal = valArray[valArray.length-1],
$button = $this.siblings('.button'),
$fakeFile = $this.siblings('.file-holder');
if(newVal !== '') {
$button.text('Photo Chosen');
if($fakeFile.length === 0) {
$button.after('<span class="file-holder">' + newVal + '</span>');
} else {
$fakeFile.text(newVal);
}
}
};
$(document).ready(function() {
$('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
});
<span class="file-wrapper">
<input type="file" name="photo" id="photo" />
<span class="button">Choose a Photo</span>
</span>
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #79130e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
padding: 4px 18px;
text-transform: uppercase;
}
@kalmtib
Copy link

kalmtib commented Sep 15, 2014

HELP!

On IE 9 does'nt work for me....

@franzose
Copy link

franzose commented May 7, 2015

Big thanks for the gist!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment