How to change the button text of <input type="file" />?
Solution 1:
Use Bootstrap FileStyle, which is used to style the file fields of forms. It is a plugin for a jQuery-based component library called Twitter Bootstrap
Sample usage:
Include:
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>
Via JavaScript:
$(":file").filestyle();
Via data attributes:
<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
Solution 2:
You can put an image instead, and do it like this:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
CAVEAT: In IE9 and IE10 if you trigger the onClick in a file input via javascript, the form will be flagged as 'dangerous' and cannot be submitted with javascript, not sure if it can be submitted traditionally.
Solution 3:
Hide the file input. Create a new input to capture a click event and forward it to the hidden input:
<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>
Solution 4:
The "upload file..." text is pre-defined by the browser and can't be changed. The only way to get around this is to use a Flash- or Java-based upload component like swfupload.
Solution 5:
Works Perfectly on All Browsers Hope it will work for you too.
HTML:<input type="file" class="custom-file-input">
CSS:
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
Change content: 'Select some files';
with the text you want within ''
IF NOT WORKING WITH firefox then use this instead of input:
<label class="custom-file-input" for="Upload" >
</label>
<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">