Question

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

但今天，我更新到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/

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

1 个答案: