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">