jquery -具有jquery移动风格的文件上传按钮

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手机改变了它处理文件输入的方式。从announcement post

现在，移动平台越来越支持文件输入类型，我们已经在jQuery

中为这些类型添加了自动样式。

实际上，它会围绕输入生成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>

一种解决方案是通过简单地添加属性data-role="none"来阻止jQuery Mobile对元素进行样式设置

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

请在此处查看jsFiddle：http://jsfiddle.net/X23dx/1/

jQuery Mobile1.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/