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

Question

我使用jquery-file-upload插件和jquery-1.8.3以及jquery-mobile-1.2.它工作正常.

但今天,我更新到jquery-1.9和jquery-mobile-1.3,按钮样式已经改变.

我把它们添加到了jsfiddle.我希望它看起来像这样

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

但它看起来像那样

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

谢谢.

Answer 1

在新版本中,jQuery Mobile改变了处理文件输入的方式.从公告帖子:

现在,移动平台越来越支持文件输入类型,我们为这些添加了自动样式作为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/