Forums

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?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #164908
    MBM
    Participant

    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;
    }
    
    #164922
    MBM
    Participant

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.