Skip to content

Instantly share code, notes, and snippets.

@david-pm

david-pm/FileInput

Last active August 29, 2015 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save david-pm/3827c3fd6afb754b8d31 to your computer and use it in GitHub Desktop.
Save david-pm/3827c3fd6afb754b8d31 to your computer and use it in GitHub Desktop.
Download ZIP
Cross-Browser File Input
Raw
FileInput
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="DAVIDPM 2015, davidpm.io">
<title>Custom Cross-Browser File Input</title>
<style type="text/css">
.wrapper {
margin: 5%;
padding: 5%;
border: 1px solid #aaa;
text-align: center;
font: bold small-caps 100%/1 Verdana, Arial, sans-serif;
background-color: whitesmoke;
color: navy;
}
.file-input {
position: relative;
overflow: hidden;
border: 1px solid #aaa;
border-radius: 3px;
background: coral;
color: whitesmoke;
padding: 5px 10px;
display: inline-block;
}
.file-input input[type="file"] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
display: block;
cursor: pointer;
}
.filename {
font-size: 85%;
font-weight: normal;
padding: 5px 10px;
display: inline-block;
vertical-align: top;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Custom Cross-Browser File Input</h1>
<span class="file-input">
Browse<input type="file" />
</span>
<span class="filename"></span>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.file-input input[type="file"]').change( function() {
var filename = $(this).val().replace(/\\/g, '/').replace(/.*\//, '');
$('.filename').html( filename );
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment