html改变input file文本,html - How to change the button text of <input type="file" />? - Stack Overflow...

157

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:

Via JavaScript:

$(":file").filestyle();

Via data attributes:

answered Sep 20 '13 at 4:57

Fernando KoshFernando Kosh

3,16811 gold badge3030 silver badges2525 bronze badges

7

1

Doesn't seem to be working for me. It still shows the brorser's default buttons. Also, the demo at github.com/markusslima/bootstrap-filestyle.git doesn't work either - all examples show the default buttons. Am I missing something?

– Ya.

Jul 2 '15 at 16:07

8

@Tony Uhh.... what makes you think Bootstrap isn't using the "wacky hack" underneath as well? :-)

– Andz

Jul 3 '15 at 8:34

@Ya can you tell what browser and it version? Tested now on Chrome Version 43.0.2357.130 (64-bit) on Linux and all examples works perfectly.

– Fernando Kosh

Jul 6 '15 at 21:16

31

Throwing a javascript library (with a plugin!) on such a small problem is an inelegant overkill.

– MKaama

Sep 12 '16 at 18:48

3

Downvoted. It is not even an answer, only a workaround that needs an extra library. The answer should intend to change the rendering behaviour for browsers.

– wdetac

Jun 12 '18 at 2:58

114

You can put an image instead, and do it like this:

HTML:

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.

Charlie74

2,8111212 silver badges2222 bronze badges

answered Dec 29 '11 at 11:58

ParParParPar

6,67077 gold badges4040 silver badges5252 bronze badges

6

6

This is a clever solution. Couldn't you also do this with a element?

– Code Commander

Jul 23 '13 at 17:41

1

@Code Commander -Thanks, and yes, you can do it with every element you want, but the most common is the element. Just get rid of the button+text field of the "file input"...

– ParPar

Jul 24 '13 at 21:24

2

Just a heads up to anyone using the above, some mobile browsers disable triggering file input clicks programmatically. Specifically, android 4 for the Galaxy S III

– newshorts

May 24 '14 at 19:49

I am using

– sohaiby

May 11 '15 at 12:09

your solution doesnt work. You prolly didn't set border, margin, padding and background-color or or else it would be obvious

– yan bellavance

Mar 29 '18 at 3:37

110

Hide the file input. Create a new input to capture a click event and forward it to the hidden input:

2540625

9,37255 gold badges4141 silver badges5151 bronze badges

answered Mar 27 '16 at 13:58

MushyPeasMushyPeas

1,95722 gold badges2525 silver badges4141 bronze badges

11

throwing in an HTA file with ie7 mode I had to remove the ; at the end.

– ATek

Jul 20 '17 at 23:28

great, don't want to include bootstrap just to change two words of text, but how would you do it if the file-input was created dynamically?

– asparism

Dec 10 '17 at 1:06

@asparism use JavaScript to manipulate the DOM, hide it by setting it's style and use before() and add the new input element?

– MushyPeas

Dec 10 '17 at 13:39

3

@MushyPeas it is the easiest way. tried to play with css but this solution is much faster and easier. thanks

– Mara

Jun 28 '18 at 19:33

2

This was the easiest way for me, too! It also allowed me to STYLE the 'mock' file-button as one of a set of other form-button options - without having to worry about displaying the odd-looking "Browse" file-button.

– Harry Mantheakis

Sep 12 '19 at 17:00

46

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.

answered Dec 22 '09 at 5:11

PekkaPekka

419k129129 gold badges933933 silver badges10591059 bronze badges

3

5

Can you prove it that it can't be changed?

– user198729

Dec 22 '09 at 5:12

Or by browsing the browsers' source codes, at least for the Open Source ones.

– Pekka

Dec 22 '09 at 5:15

This could by the answer (to another question, something like "Why is the content of value, 'VALUE="C:\someFile.txt"' for an input field of type file, 'TYPE="FILE"', ignored by the browser?"): stackoverflow.com/questions/1342039

– Peter Mortensen

Jan 21 '10 at 15:47

26

Works Perfectly on All Browsers Hope it will work for you too.

HTML:

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:

answered Oct 3 '15 at 6:32

Code BlackCode Black

44155 silver badges1111 bronze badges

11

Works on Safari, though

– Cullub

Dec 5 '15 at 14:34

Its working perfectly at my end on my FF 41.0.2.You are running in to cross browser compatibility issue please refer to CSS BOX MODEL to minify the issue.

– Code Black

Dec 7 '15 at 17:23

1

The problem is probably that FF is built on Gecko, not webkit. (my best guess)

– Cullub

Dec 7 '15 at 18:28

2

Choose Some File

– Code Black

Dec 7 '15 at 18:32

4

OK, Thanks! Check out this JSFiddle. If you edit your answer with that, I think it's worthy of an upvote :)

– Cullub

Dec 7 '15 at 18:49

16

Simply

Your text here

[Edit with snippet]

Your text here

answered Oct 31 '18 at 4:59

Ken KarloKen Karlo

17611 silver badge55 bronze badges

3

Try to see what I made here jsfiddle.net

– Ken Karlo

Nov 1 '18 at 4:54

Thanks, exactly what I wanted :)

– Garth Baker

May 16 '20 at 15:15

This is fine thank you

– Rao

2 days ago

13

I think this is what you want:

Your text here

answered Dec 23 '17 at 7:05

ChitChit

22522 silver badges1010 bronze badges

2

1

The best solution. Thanks!

– Eugene Veselov

Sep 18 '20 at 15:32

Thanks @EugeneVeselov

– Chit

Dec 11 '20 at 9:05

11

This is a JQuery plugin to change the button text of an input file element.

Example HTML:

Example JS:

$('#choose-file').inputFileText({

text: 'Select File'

});

Result:

answered Jun 26 '15 at 0:35

datchungdatchung

1,6261818 silver badges1616 bronze badges

1

Not a great solution for 'multiple' files. Does not show more than one file.

– Benj Sanders

Jan 3 at 6:40

9

Your name

JS

document.getElementById("uploadBtn").onchange = function () {

document.getElementById("uploadFile").value = this.value;

};

Igor Ivancha

3,23144 gold badges2828 silver badges3939 bronze badges

answered Dec 11 '14 at 10:49

webskywebsky

2,56411 gold badge3030 silver badges2626 bronze badges

0

3

EDIT: I see now by the comments that you are asking about the button text, and not the file path. My bad. I'll leave my original answer below in case someone else who stumbles upon this question interprets it the way I originally did.

2nd EDIT: I had deleted this answer because I decided that I misunderstood the question and my answer was not relevant. However, comments in another answer indicated that people still wanted to see this answer so I'm undeleting it.

MY ORIGINAL ANSWER (I thought the OP was asking about the path, not the button text):

This is not a supported feature for security reasons. The Opera web browser used to support this but it was removed. Think about what would be possible if this were supported; You could make a page with a file upload input, pre-populate it with a path to some sensitive file and then auto-submit the form using javascript triggered by the onload event. This would happen too fast for the user to do anything about it.

Amirhossein Mehrvarzi

11.3k66 gold badges3838 silver badges6565 bronze badges

answered Dec 22 '09 at 5:11

AsaphAsaph

148k2424 gold badges184184 silver badges187187 bronze badges

3

Use for the caption

Your caption here

οnchange='optionalExtraProcessing(b1.files[0])'

accept='image/png'>

This works without any javascript. You can decorate the label to any degree of complexity, to your heart's content. When you click on the label, the click automatically gets redirected to the file input. The file input itself can be made invisible by any method. If you want the label to appear like a button, there are many solutions, e.g.:

label u {

-webkit-appearance: button;

-moz-appearance: button;

appearance: button;

text-decoration: none;

color: initial;

}

answered Sep 12 '16 at 18:37

MKaamaMKaama

1,38822 gold badges1515 silver badges2424 bronze badges

2

Only CSS & bootstrap class

browse

answered Aug 8 '18 at 8:58

mahmood kabimahmood kabi

1411111 bronze badges

2

I know, nobody asked for it but if anybody is using bootstrap, it can be changed through Label and CSS Pseudo-selector.

For changing button text:

.custom-file-label::after {

content: "What's up?";

}

For changing field text:

Drop it like it's hot

Here's a fiddle.

answered Jul 14 '20 at 7:55

actuallyakashactuallyakash

8166 bronze badges

1

Before that , add an image and it will occupy the space of

Use the following CSS to the file element

position:relative;

opacity:0;

z-index:99;

Toby Speight

23.6k4747 gold badges5757 silver badges8484 bronze badges

answered Jul 11 '13 at 5:58

Bibaswann BandyopadhyayBibaswann Bandyopadhyay

3,1772727 silver badges2727 bronze badges

0

1

for me it does not work the custom text with bootstrap-filestyle. It help with button decoration but text its weird to be changed, before get into wrestling with css i try the following :

$( document ).ready(function() {

$('.buttonText').html('Seleccione ficheros');

});

bootstrap-filestyle render the component as span with a class named butonText, so when document load just change the text. easy right and it must work on all browsers.

cheers

answered Apr 22 '19 at 9:04

Boris Ch.FBoris Ch.F

15655 bronze badges

0

if you using rails and have problem apply it, I would like to add some tips from original answer posted by @Fernando Kosh

Download file zip and copy file bootstrap-filestyle.min.js ke folder app/assets/javascripts/

open your application.js and add this line below

//= require bootstrap-filestyle.min

open your coffee and add this line

$(":file").filestyle({buttonName: "btn-primary",buttonBefore: true,buttonText: " Your text here",icon: false});

answered Mar 20 '17 at 15:20

widjajaydwidjajayd

5,57433 gold badges2121 silver badges3333 bronze badges

0

You can simply add some css trick. you don't need javascript or more input files and i keep existing value attribute. you need to add only css. you can try this solution.

.btn-file-upload{

width: 187px;

position:relative;

}

.btn-file-upload:after{

content: attr(value);

position: absolute;

top: 0;

left: 0;

bottom: 0;

width: 48%;

background: #795548;

color: white;

border-radius: 2px;

text-align: center;

font-size: 12px;

line-height: 2;

}

answered Mar 7 '19 at 5:08

Udara KasunUdara Kasun

1,8451212 silver badges2222 bronze badges

0

Here is a way to "change" the text of an input with file type, with pure HTML and javascript:

*The text you want*

Wai Ha Lee

7,7335454 gold badges5454 silver badges8080 bronze badges

answered Apr 14 '19 at 20:44

IntelarXIntelarX

7111 silver badge44 bronze badges

0

I did it like this for my project:

.btn-outlined.btn-primary {

color: #000;

}

.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {

color:#000;

}

.btn-block {

display: block;

width: 100%;

padding: 15px 0;

margin-bottom: 10px;

font-size: 18px;

font-family: Arial, Helvetica, sans-serif;

text-align: center;

}

Your text

answered Apr 6 '20 at 7:50

KhapiKhapi

35033 silver badges55 bronze badges

0

In Bootstrap +4.5 you can simply add bellow style to your code:

.custom-file-input ~ .custom-file-label::after {

content: "Your custom text ...";

}

and your input:

Your custom placeholder ...

answered Aug 27 '20 at 23:01

Sajad AfaghiySajad Afaghiy

35644 silver badges1010 bronze badges

-1

This is an alternative solution that may be of help to you. This hides the text that appears out of the button, mixing it with the background-color of the div. Then you can give the div a title you like.

UPLOAD IMAGE

Kaiido

87.9k77 gold badges147147 silver badges197197 bronze badges

answered Jun 15 '13 at 4:49

jarimosjarimos

133 bronze badges

2

In Chrome 39 I see both the UPLOAD IMAGE text and the button. Perhaps chrome's handling of file inputs has changed since you posted this?

– EricP

Dec 23 '14 at 18:26

1

@yan-bellavance what are you doing? If you think an answer is incorrect or not helpful, downvote, but in no way deface it!

– Kaiido

Mar 29 '18 at 3:49

association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Not the answer you're looking for? Browse other questions tagged html input or ask your own question.