Geek Answers Handbook

JQuery-File-Upload button with jQuery mobile style

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

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

I 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.

+4
source share
1 answer

In the new version, jQuery Mobile has changed the way it works with file inputs. From the post:

Now that input file types are becoming more supported by mobile platforms, we have added an automatic style for them 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>

The solution would be to prevent jQuery Mobile from styling your element by simply adding the data-role="none" attribute

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

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

Update for jQuery Mobile 1.4

To get (view) a similar result with version 1.4, you need to add several new classes to the <span> environment:

 <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 updated jsFiddle: http://jsfiddle.net/X23dx/173/

+10
source

More articles:


All Articles