带jquery移动样式的JQuery-File-Upload按钮

Question

我用jquery-1.8.3和jquery-mobile-1.2使用了jquery-file-upload插件。它运行良好。

但今天，我更新到jquery-1.9和jquery-mobile-1.3，并且按钮样式已经改变。

我已将它们添加到jsfiddle。 我希望它看起来像this

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

但它看起来像that

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

感谢。

Answer 1

随着新版本的发布，jQuery Mobile改变了它处理文件输入的方式。从announcement post：

现在文件输入类型变得越来越受移动平台的支持，我们为这些作为jQuery Mobile的一部分添加了自动样式。

事实上，它产生围绕输入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> 

一个解决办法是防止jQuery Mobile的风格你元素，只需通过添加属性data-role="none"

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

看到这里的jsFiddle：http://jsfiddle.net/X23dx/1/

更新jQuery Mobile的1.4

获得与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> 

查看更新的jsfiddle：http://jsfiddle.net/X23dx/173/