Bouton JQuery-File-Upload avec style mobile jquery

Question

J'ai utilisé le plugin jquery-file-upload avec jquery-1.8.3 et jquery-mobile-1.2. Cela a bien fonctionné.

Mais aujourd'hui, j'ai mis à jour à jquery-1.9 et jquery-mobile-1.3, et le style de bouton a changé.

Je les ai ajoutés à jsfiddle. Je veux qu'il ressemble this

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

Mais il semble que that

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

Merci.

Answer 1

Avec la nouvelle version, jQuery Mobile a changé la façon dont il traite les entrées de fichiers. De l'announcement post:

Maintenant que les types d'entrée de fichiers sont de plus en plus pris en charge par les plates-formes mobiles, nous avons ajouté un style automatique pour ceux-ci dans le cadre de jQuery Mobile.

Et en effet, il génère du code HTML autour de l'entrée:

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

Une solution serait d'empêcher jQuery Mobile style de votre élément, simplement en ajoutant l'attribut data-role="none"

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

Voir le jsFiddle ici: http://jsfiddle.net/X23dx/1/

Mise à jour pour jQuery Mobile 1.4

Pour obtenir une (sorte de) résultat similaire avec la version 1.4, vous devez ajouter de nouvelles classes à la <span> entourant:

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

Voir la jsFiddle mise à jour: http://jsfiddle.net/X23dx/173/