jquery - 具有 jquery mobile 样式的 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/