JQuery-File-Upload bouton avec jquery mobile style

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

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

J'ai ajouté à jsfiddle.
Je veux qu'il ressemble à cette

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

Mais il semble que que

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

Grâce.

OriginalL'auteur coordinate | 2013-03-02

  1. 10

    Avec la nouvelle version de jQuery Mobile a changé la façon de traiter avec les fichiers d'entrées. À partir de la poste annonce:

    Maintenant que le fichier d'entrée types sont de plus en plus pris en charge par les plates-formes mobiles, nous avons ajouté de style automatique pour ces 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 de prévenir jQuery Mobile pour le style de votre élément, tout 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 de jQuery Mobile 1.4

    Pour obtenir une (sorte de) résultat similaire avec la version 1.4, vous devez ajouter de nouvelles classes pour les environs <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>

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

    Veuillez indiquer comment le faire fonctionner avec jquery 1.4 ?
    Je voulais dire jquery mobile 1.4
    Veuillez voir ma mise à jour. Maintenant, c'est un peu le deviner, parce que le guide de mise à niveau n'est pas encore disponible, mais vous devriez obtenir un résultat approchant.
    Votre suggestion qui aide vraiment, merci beaucoup pour votre réponse rapide. Aurait été bon si j'ai trouvé votre réponse avant de passer une journée sur la question. Comment pourrais-je augmenter la largeur du bouton (sans ajouter plus de texte) ?
    Ajoutez simplement width: 200px à la .fileinput-button sélecteur CSS: jsfiddle.net/X23dx/174

    OriginalL'auteur Andreas Schwarz