Verwenden Sie den CSS-Alpha-Filter, um den Verschönerungscode für den Eingabedateistil zu implementieren

Verwenden Sie den CSS-Alpha-Filter, um den Verschönerungscode für den Eingabedateistil zu implementieren_Erfahrungsaustausch

PHP中文网

Freigeben： 2016-05-16 12:06:34

Original

1728 Leute haben es durchsucht

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

Nach dem Login kopieren

Auch wenn Sie das Onclick-Handle von f einem Objekt zuweisen, wie zum Beispiel:

<input type="file" id="f" name="f">

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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)!