0

I write a code in html and want to create button that upload a file.I use the following code
but it show button name choose files but i want the button show browse as display name kindly guide
Filename: <input type="file" name="uploadFile" value="Browse">

3
Contributors
3
Replies
41
Views
2 Years
Discussion Span
Last Post by Kumar_K_K
1

You can't change it through your markup. You need a hacked solution. There are quites some workarounds either through CSS or JS, but each with their own pros and cons... Google it and you shall find.

0
    `html`
    <div class="inputBtnSection">
    <input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
        <label class="fileUpload">
            <input id="uploadBtn" type="file" class="upload" />
            <span class="uploadBtn">Upload / Browse File ..</span>
    </label>
    </div>
`Css`
*{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.inputBtnSection{
    display:inline-block;
    vertical-align:top;
    font-size:0;
    font-family:verdana;
}
.disableInputField{
    display:inline-block;
    vertical-align:top;
    height: 27px;
    margin: 0;
    font-size:14px;
    padding:0 3px;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    border:solid 1px gray;
    display:inline-block;
    vertical-align:top;
}
.uploadBtn{
    display:inline-block;
    vertical-align:top;
    background:rgba(0,0,0,0.5);

    `Js`
    document.getElementById("uploadBtn").onchange = function () {
        document.getElementById("uploadFile").value = this.value;
    };
</pre>

try this

Edited by Kumar_K_K: heading is added

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.