jQuery-File-Upload 按钮，带有 jquery mobile 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15175391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery-File-Upload button with jquery mobile style
提问by coordinate
I used jquery-file-upload plugin with jquery-1.8.3 and jquery-mobile-1.2. It worked fine.
我在 jquery-1.8.3 和 jquery-mobile-1.2 中使用了 jquery-file-upload 插件。它工作得很好。
But today, I updated to jquery-1.9 and jquery-mobile-1.3, and the button style has changed.
但是今天更新到jquery-1.9和jquery-mobile-1.3，按钮样式变了。
I have added them to jsfiddle. I want it to look like this
我已将它们添加到 jsfiddle。我希望它看起来像这样
<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.
谢谢。
回答by Andreas Schwarz
With the new version, jQuery Mobile changed the way it deals with file inputs. From the announcement post:
在新版本中，jQuery Mobile 改变了处理文件输入的方式。从公告帖子：
Now that file input types are becoming more supported by mobile platforms, we've added automatic styling for these as part of jQuery Mobile.
现在，移动平台越来越支持文件输入类型，我们在 jQuery Mobile 中为这些类型添加了自动样式。
And indeed, it generates HTML code around the input:
事实上，它会围绕输入生成 HTML 代码：
<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"
一个解决方案是阻止 jQuery Mobile 为您的元素设置样式，只需添加属性 data-role="none"
<input type="file" name="files[]" multiple data-role="none"/>
See the jsFiddle here: http://jsfiddle.net/X23dx/1/
在此处查看 jsFiddle：http: //jsfiddle.net/X23dx/1/
Update for jQuery Mobile 1.4
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>:
要获得与 1.4 版本类似的（某种）结果，您需要向周围添加一些新类<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/
查看更新的 jsFiddle：http: //jsfiddle.net/X23dx/173/
