recherche

Maison  >  Questions et réponses  >  le corps du texte

Remplacer le type d'entrée = fichier par image

Comme beaucoup de gens, je voulais personnaliser l'image laide input type=file,并且我知道如果没有一些 hack 和/或 javascript 就无法完成。但是,问题是,就我而言,上传文件按钮仅用于上传图像(jpeg|jpg|png|gif),所以我想知道是否可以使用“clickable" exactement comme le fichier de type d'entrée (affiche la boîte de dialogue et affiche le même $_FILE sur la page soumise).

J'ai trouvé une solution de contournement ici, qui est également intéressante (mais ne fonctionne pas dans Chrome =/).

Que faites-vous lorsque vous souhaitez ajouter du style au bouton de fichier ? Si vous avez des opinions à ce sujet, veuillez cliquer sur le bouton de réponse ;)

P粉567281015P粉567281015513 Il y a quelques jours782

répondre à tous(1)je répondrai

  • P粉158473780

    P粉1584737802023-10-14 10:09:12

    Cela fonctionne très bien pour moi :

    .image-upload>input {
      display: none;
    }
    <div class="image-upload">
      <label for="file-input">
        <img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
      </label>
    
      <input id="file-input" type="file" />
    </div>

    Fondamentalement, l'attribut for d'une étiquette fait que cliquer sur l'étiquette revient à cliquer sur l'entrée spécifiée.

    De plus, définir la propriété display sur none permet à l'entrée du fichier de ne pas être rendue du tout, la masquant ainsi proprement.

    Testé dans Chrome, mais selon le Web, devrait fonctionner dans tous les principaux navigateurs. :)

    Éditeur : JSFiddle ajouté ici : https://jsfiddle.net/c5s42vdz/

    répondre
    0
  • Annulerrépondre