'How to change the "Browse" button text

I need to change the "Browse" button text according to the locale in a JSP. (Ex. Russian , Portuguese) for a Spring based project.

Following is the current implementation for the browse button 

<td><input type="file" id="file" name="fileName"/></td>

enter image description here

As I know we can't change the text for input type file. It's the default behavior for a browse button int he browser.

I tried the following solution

<input type="button" id="button" value="Browse"/>
<input type="file" id="fileName"  style="opacity:0; position:relative; left:-40px;"  onchange="javascript: document.getElementById ('fileName').value = this.value"/>

enter image description here

But above one is giving security issue in the browser.

In https://stackoverflow.com/ it's having the ideal solution for this (change text for the browse button using input type file):

enter image description here

<input type="file" name="filename" id="filename-input" value="browse" size="18" style="float: right; width: 250px;">

Can anyone help me to resolve this problem or the way to implement above solution( https://stackoverflow.com/ file upload).

htmlcssspringjspbrowser


Solution 1:[1]

You might be looking for this answer to a similar question.

It suggests using Bootstrap File-system css styling.

Solution 2:[2]

suggest you to do it this way to keep it simple:

<input type="file" style="display:none"/>
<button id="browse">whatever</button>

$('#browse').click(function(){
    $('input[type="file"]').trigger('click');
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Jaiwo99

Related Questions