Created
November 26, 2014 11:06
-
-
Save volpeo/7b0f8481c408f8a28dbd to your computer and use it in GitHub Desktop.
Upload button // source http://jsbin.com/gilevurove
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
.fileUpload { | |
position: relative; | |
overflow: hidden; | |
} | |
.fileUpload input.upload { | |
position: absolute; | |
top: 0; | |
right: 0; | |
margin: 0; | |
padding: 0; | |
font-size: 20px; | |
cursor: pointer; | |
opacity: 0; | |
filter: alpha(opacity=0); | |
} | |
.btn { | |
display: inline-block; | |
margin-bottom: 0; | |
font-weight: normal; | |
text-align: center; | |
vertical-align: middle; | |
cursor: pointer; | |
background-image: none; | |
border: 1px solid transparent; | |
white-space: nowrap; | |
padding: 6px 12px; | |
font-size: 14px; | |
line-height: 1.42857143; | |
border-radius: 4px; | |
color: #333; | |
background-color: #fff; | |
border-color: #ccc; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="uploadFile"></div> | |
<div class="fileUpload btn btn-primary"> | |
<span>Upload</span> | |
<input id="uploadBtn" type="file" class="upload" /> | |
</div> | |
<script id="jsbin-javascript"> | |
document.getElementById("uploadBtn").onchange = function () { | |
document.getElementById("uploadFile").innerHTML = this.value.replace(/^.*[\\\/]/, ''); | |
}; | |
</script> | |
<script id="jsbin-source-css" type="text/css">.fileUpload { | |
position: relative; | |
overflow: hidden; | |
} | |
.fileUpload input.upload { | |
position: absolute; | |
top: 0; | |
right: 0; | |
margin: 0; | |
padding: 0; | |
font-size: 20px; | |
cursor: pointer; | |
opacity: 0; | |
filter: alpha(opacity=0); | |
} | |
.btn { | |
display: inline-block; | |
margin-bottom: 0; | |
font-weight: normal; | |
text-align: center; | |
vertical-align: middle; | |
cursor: pointer; | |
background-image: none; | |
border: 1px solid transparent; | |
white-space: nowrap; | |
padding: 6px 12px; | |
font-size: 14px; | |
line-height: 1.42857143; | |
border-radius: 4px; | |
color: #333; | |
background-color: #fff; | |
border-color: #ccc; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> | |
document.getElementById("uploadBtn").onchange = function () { | |
document.getElementById("uploadFile").innerHTML = this.value.replace(/^.*[\\\/]/, ''); | |
};</script></body> | |
</html> |
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
.fileUpload { | |
position: relative; | |
overflow: hidden; | |
} | |
.fileUpload input.upload { | |
position: absolute; | |
top: 0; | |
right: 0; | |
margin: 0; | |
padding: 0; | |
font-size: 20px; | |
cursor: pointer; | |
opacity: 0; | |
filter: alpha(opacity=0); | |
} | |
.btn { | |
display: inline-block; | |
margin-bottom: 0; | |
font-weight: normal; | |
text-align: center; | |
vertical-align: middle; | |
cursor: pointer; | |
background-image: none; | |
border: 1px solid transparent; | |
white-space: nowrap; | |
padding: 6px 12px; | |
font-size: 14px; | |
line-height: 1.42857143; | |
border-radius: 4px; | |
color: #333; | |
background-color: #fff; | |
border-color: #ccc; | |
} | |
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
document.getElementById("uploadBtn").onchange = function () { | |
document.getElementById("uploadFile").innerHTML = this.value.replace(/^.*[\\\/]/, ''); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment