Heim > Artikel > Web-Frontend > Informationen zur Kontrolle und Verschönerung von Eingabedateien
Informationen zur Kontrolle und Verschönerung von Eingabedateien
- 高洛峰Original
- 2017-02-17 16:15:141759Durchsuche
Beim Hochladen auf einige Websites wird nach dem Klicken auf die Schaltfläche „Durchsuchen“ ein Dialogfeld [Datei auswählen] angezeigt. Wenn Sie diese Funktion realisieren möchten, verwenden Sie einfach die Eingabedateisteuerung, um sie zu erreichen ~
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style></style> </head> <body> <input type="file" value="选择文件" /> </body> </html>
Das Rendering stammt von Tante Jiang:
Achtung! Denken Sie nicht, dass dies aus einem Text und einer Schaltfläche besteht. Tatsächlich handelt es sich um eine Dateisteuerung.
Ich bin heute bei der Arbeit auf eine Anforderung gestoßen: Nicht anzeigen. Keine Datei ausgewählt" ", nachdem ich eine Stunde herumgebastelt habe, habe ich festgestellt, dass die Einstellung des Breitenwerts abgeschlossen ist:
Code:
Breitenwert Stellen Sie ihn genau auf 70 Pixel ein, wie unten gezeigt:
[Verschönerung]
Idee:
Das Äußere Die p-Ebene dient dazu, das Innere zu geben. Die Eingabe stellt eine Positionsreferenz bereit, da beim Schreiben von Stilen eine relative Positionierung erforderlich ist, sodass die reale Dateisteuerung die Simulation abdeckt und dann die Dateisteuerung ausblendet (auch wenn die Dateisteuerung unsichtbar ist)
<!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>
Wirkung:
Der obige Artikel über die Kontrolle und Verschönerung von Eingabedateien ist der gesamte vom Herausgeber I geteilte Inhalt Ich hoffe, es kann Ihnen eine Referenz geben, und ich hoffe, dass Sie bitte die chinesische PHP-Website unterstützen.
Weitere Artikel über Eingabedateikontrollen und Verschönerung finden Sie auf der chinesischen PHP-Website!