Heim > Artikel > Web-Frontend > Verwenden Sie den CSS-Alpha-Filter, um den Verschönerungscode für den Eingabedateistil zu implementieren_Erfahrungsaustausch
Verwenden Sie den CSS-Alpha-Filter, um den Verschönerungscode für den Eingabedateistil zu implementieren_Erfahrungsaustausch
- PHP中文网Original
- 2016-05-16 12:06:341694Durchsuche
Verwenden Sie den CSS-Alphafilter, um den Verschönerungscode für den Eingabedateistil zu implementieren_Erfahrungsaustausch
Beim Hochladen von Dateien im WEB müssen Sie das Upload-Feld verwenden:
<input type="file" id="f" name="f">
Auch wenn Sie das Onclick-Handle von f einem Objekt zuweisen, wie zum Beispiel:
<input type="file" id="f" name="f">
Nach dem „Klick“ erscheint auch das Dialogfenster zur Dateiauswahl. Leider sind Sie enttäuscht: Sie können immer noch keine Dateien hochladen! Was zu tun? Schauen Sie sich diesen Absatz an:
<BODY onmousemove="f.style.pixelLeft=event.x-200;f.style.pixelTop=event.y-10;"> <input type="text"><input type="button" onmousemove=""> <input type="file" id="f" name="f" style="position:absolute;"> </BODY>
Mit der Maus klicken und den Effekt sehen? Basierend auf der obigen Idee können wir es einfach unter einen Knopf legen und das war's! !
<style>
input{border:1px solid green;}
</style>
<BODY>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt">
<input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;"
value="请选择文件" size="30">
<input type="file" id="f" name="f" style="position:absolute;" size="1" onChange="txt.value=this.value">
<INPUT TYPE="submit">
</form>
</BODY>Um einen echten Simulationseffekt zu erzielen, müssen Sie f ausblenden, einen undurchsichtigen Alphafilter hinzufügen und das Attribut hidefocus hinzufügen, um die gepunktete Linie auszublenden f:
<style>
input{border:1px solid green;}
</style>
<BODY>
<form method="post" action="" enctype="multipart/form-data">
<input type="text" id="txt" name="txt">
<input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;"
value="请选择文件" size="30" onclick="f.click()">
<input type="file" id="f" onchange="txt.value=this.value" name="f"
style="position:absolute;filter:alpha(opacity=0);" size="1" hidefocus>
<INPUT TYPE="submit">
</form>
</BODY> Sie können den Effekt sehen, wenn Sie opacity=0 auf etwas größer ändern.
OK, jetzt können Sie ihren Stil und ihre Position steuern. . .
Das Obige ist der Inhalt der Verwendung des CSS-Alpha-Filters zur Implementierung des Verschönerungscodes für den Eingabedateistil. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!