Maison >interface Web >tutoriel HTML >À propos du contrôle et de l'embellissement des fichiers d'entrée
À propos du contrôle et de l'embellissement des fichiers d'entrée
- 高洛峰original
- 2017-02-17 16:15:141819parcourir
Lors du téléchargement sur certains sites Web, une boîte de dialogue [Sélectionner un fichier] apparaîtra après avoir cliqué sur le bouton « Parcourir ». Si vous souhaitez réaliser cette fonction, utilisez simplement le contrôle du fichier d'entrée pour y parvenir~
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style></style> </head> <body> <input type="file" value="选择文件" /> </body> </html>
Le rendu est celui de Tante Jiang :
Attention ! Ne pensez pas que celui-ci est composé d'un texte et d'un bouton. En fait, il s'agit d'un contrôle de fichier
J'ai rencontré une exigence au travail aujourd'hui : ne pas afficher " Aucun fichier sélectionné" ", après avoir bricolé pendant une heure, j'ai constaté que le réglage de sa valeur de largeur est fait :
Code :
Valeur de largeur Réglez-le sur 70 px, comme indiqué ci-dessous :
[Embellissement]
Idée :
L'extérieur la couche de p doit donner l'intérieur L'entrée fournit une référence de position, car un positionnement relatif est requis lors de l'écriture des styles, de sorte que le contrôle de fichier réel couvre la simulation, puis masque le contrôle de fichier (même si le contrôle de fichier est invisible)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }
</style>
</head>
<body>
<br><br>
<p class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览' />
<input type="file" name="fileField" class="file" id="fileField" size="28"/>
</form>
</p>
</body>
</html>
Effet :
L'article ci-dessus sur le contrôle et l'embellissement des fichiers d'entrée est tout le contenu partagé par l'éditeur I. j'espère qu'il pourra vous donner une référence, et j'espère qu'il sera possible de prendre en charge le site Web PHP chinois.
Pour plus d'articles sur les contrôles et l'embellissement des fichiers d'entrée, veuillez faire attention au site Web PHP chinois !