Created
June 20, 2012 05:05
-
-
Save GLC/2958220 to your computer and use it in GitHub Desktop.
Fancy File Inputs (file name INSIDE button on change)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var SITE = SITE || {}; | |
SITE.fileInputs = function() { | |
var $this = $(this), | |
$val = $this.val(), | |
valArray = $val.split('\\'), | |
newVal = valArray[valArray.length-1], | |
$button = $this.siblings('.button'); | |
if(newVal !== '') { | |
$button.text(newVal); // the main change is here, I've deleted the instance of fakefile | |
} | |
}; | |
$(document).ready(function() { | |
$('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<span class="file-wrapper"> | |
<input type="file" name="photo" id="photo" /> | |
<span class="button">Choose a Photo</span> | |
</span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sorry all, I deleted the original one, didn't know you could even do that O.o...