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.

Answer 1

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/