帶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/