Maison > Article > interface Web > Utilisez le filtre alpha CSS pour implémenter le code d'embellissement du style de fichier d'entrée_Experience Exchange
Utilisez le filtre alpha CSS pour implémenter le code d'embellissement du style de fichier d'entrée_Experience Exchange
- PHP中文网original
- 2016-05-16 12:06:341694parcourir
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">
Même si vous attribuez le handle onclick de f à un objet, tel que :
<input type="file" id="f" name="f">
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>
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>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> 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 (www.php.cn) !