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

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

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

var inputlabelBox = document.querySelector('.inputlabelBox');
var my_file = document.querySelector('#my_file');
var img = document.querySelector('#img'); 
my_file.onchange = function()
{       
         var file = this.files[0];
         var reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = function()
         {
                img.src = this.result;
         }
}

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!