Comment modifier le style d'étiquette du fichier d'entrée dans js

小云云
Libérer: 2023-03-22 10:22:01
original
2783 Les gens l'ont consulté

Dans le processus de téléchargement de fichiers, vous devez généralement utiliser la balise du fichier d'entrée. Cependant, en raison de l'apparence moche de son élément de formulaire par défaut, j'ai également rencontré ce problème lorsque je le téléchargeais aujourd'hui. , et les autres éléments du formulaire environnants sont complètement déplacés. J'ai donc voulu en savoir plus et j'ai trouvé une méthode relativement simple. En fait, c'est très simple. Il s'agit de lier l'étiquette d'étiquette à l'étiquette d'entrée, de masquer l'étiquette d'entrée et de définir le style de l'étiquette d'étiquette ou de l'étiquette à l'intérieur de l'étiquette :

<form action="" method="" enctype=&#39;multipart/form-data&#39;>
   <label for=&#39;my_file&#39; class=&#39;inputlabelBox&#39;>
           <p class="inputBox">点击上传文件</p>
    </label>
    <input type="file" name="myfile" id=&#39;my_file&#39; style="display:none;" />
</form>
<img src="" id="img" width="300" />
Copier après la connexion

Après. téléchargement de l'aperçu de l'image via Js :

var inputlabelBox = document.querySelector(&#39;.inputlabelBox&#39;);
var my_file = document.querySelector(&#39;#my_file&#39;);
var img = document.querySelector(&#39;#img&#39;); 
my_file.onchange = function()
{       
         var file = this.files[0];
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function()
         {
                img.src = this.result;
         }
}
Copier après la connexion

Recommandations associées :

js efface le code de contenu du fichier de téléchargement du fichier d'entrée

fichier d'entrée télécharger un exemple de code de fonction d'aperçu d'image

Implémentation simple du fichier d'entrée pour obtenir le fichier racine répertoire_PHP tutoriel

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!