JQuery-File-Upload button with jquery mobile style

Question

I used jquery-file-upload plugin with jquery-1.8.3 and jquery-mobile-1.2. It worked fine.

But today, I updated to jquery-1.9 and jquery-mobile-1.3, and the button style has changed.

I have added them to jsfiddle. I want it to look like this

<span class="fileinput-button" data-role="button" data-icon="plus">
<span>添加文件</span>
<input type="file" name="files[]" multiple />
</span>

But it looks like that

<span class="fileinput-button" data-role="button" data-icon="plus">
<span>添加文件</span>
<input type="file" name="files[]" multiple />
</span>

Thanks.

Andreas Schwarz · Accepted Answer · 2013-12-24 08:33:06Z

11

With the new version, jQuery Mobile changed the way it deals with file inputs. From the announcement post:

Now that file input types are becoming more supported by mobile platforms, we’ve added automatic styling for these as part of jQuery Mobile.

And indeed, it generates HTML code around the input:

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
    <input type="file" name="files[]" multiple="" class="ui-input-text ui-body-c">
</div>

A solution would be to prevent jQuery Mobile to style your element, simply by adding the attribute data-role="none"

<input type="file" name="files[]" multiple data-role="none"/>

See the jsFiddle here: http://jsfiddle.net/X23dx/1/

Update for jQuery Mobile 1.4

To obtain a (kind of) similar result with the 1.4 version, you need to add some new classes to the surrounding <span>:

<span class="ui-btn ui-icon-plus ui-btn-icon-left ui-corner-all fileinput-button">
    <span>添加文件</span>
    <input type="file" name="files[]" multiple data-role="none"/>
</span>

See the updated jsFiddle: http://jsfiddle.net/X23dx/173/

edited Dec 24, 2013 at 8:33

answered Mar 2, 2013 at 16:00

Andreas Schwarz

1,8081 gold badge18 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kurrodu Over a year ago

Please advise how to get this working for jquery 1.4 ?

kurrodu Over a year ago

I meant jquery mobile 1.4

Andreas Schwarz Over a year ago

@kurrodu Please see my update. Right now it is a bit of a guess, because the upgrade guide is not available yet, but you should get an approaching result.

kurrodu Over a year ago

Your suggestion really helps, many thanks for your prompt response. Would have been good if I found your answer before spending a day over the issue. How could I increase the width of the button (without adding more text) ?

Andreas Schwarz Over a year ago

@kurrodu Simply add width: 200px to the .fileinput-button CSS selector: jsfiddle.net/X23dx/174

|

Collectives™ on Stack Overflow

JQuery-File-Upload button with jquery mobile style

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related