Utilisez le filtre alpha CSS pour implémenter le code d'embellissement du style de fichier d'entrée

Utilisez le filtre alpha CSS pour implémenter le code d'embellissement du style de fichier d'entrée_Experience Exchange

PHP中文网

Libérer： 2016-05-16 12:06:34

original

1700 Les gens l'ont consulté

Utilisez le filtre alpha CSS pour implémenter le code d'embellissement du style de fichier d'entrée_Échange d'expériences

Lors du téléchargement de fichiers sur le WEB, vous devez utiliser la boîte de téléchargement :

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

Copier après la connexion

Même si vous attribuez le handle onclick de f à un objet, tel que :

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

Copier après la connexion

Après avoir « cliqué », la boîte de dialogue de sélection de fichier apparaîtra également. Malheureusement, vous êtes déçu : vous ne pouvez toujours pas télécharger de fichiers ! Ce qu'il faut faire? Regardez ce paragraphe :

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

Copier après la connexion

Cliquez sur la souris et voyez l'effet ? Sur la base de l’idée ci-dessus, nous pouvons simplement le mettre sous un bouton et c’est tout ! !

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

Copier après la connexion

Afin d'obtenir un véritable effet de simulation, vous devez masquer f, ajouter un filtre alpha opaque et ajouter l'attribut hidefocus pour masquer la ligne pointillée de 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>

Copier après la connexion

Vous pouvez voir l'effet du changement de opacity=0 en légèrement plus grand.

OK, vous pouvez désormais contrôler leur style et leur position. . .

Ce qui précède est le contenu de l'utilisation du filtre alpha CSS pour implémenter l'échange code_experience d'embellissement du style de fichier d'entrée. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !