- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Default Upload Button Changed – Input Filename Hidden?
I’m using a small piece of code that changes the default style of the upload button using javascript, HTML & CSS. The script hides the default button image (choose file or whatever it is depending on the browser) but also hides the input filename. I want to display the input filename. There’s a filename tag in the javascript so maybe that needs to be changed?
The javascript doesn’t run in codepen so here’s the relative code :
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("uploadimgbtn").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
}
</script>
(the second div hides the upload button and filename)
<div class="uploadimgbtn" onclick="getFile()"><p class="upload">Upload Image</p></div>
<div style='height: 0px;width: 0px; overflow:hidden;'>
<input id="upfile" type="file" value="upload" onchange="sub(this)"/>
</div>
.uploadimgbtn {
font-family:'Voltaire', sans-serif;
font-size:20px;
text-transform:uppercase;
background-color:#333333;
color:#ffffff;
border-width:1px;
border-color:#8C1717;
padding:2px 20px 2px 20px;
position:absolute;
height:40px;
width:120px;
margin-left:800px;
margin-top:-105px;
cursor: default;
}
Thanks but I don’t see the input filename field. How do I incorporate it with the rest of my code? I tried to add it after the last brace but that didn’t work and I also created a new block.