css滤镜改上传文件样式

sharpwave

于 2012-03-11 22:35:51 发布

阅读量100

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sharpwave/article/details/84166755

本文介绍如何通过HTML和CSS实现文件上传功能，并利用滤镜和样式展示上传的文件。详细步骤包括创建表单、设置文件输入隐藏、触发文件选择、以及应用样式和滤镜效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传文件将浏览利用滤镜改样式

效果如图
[img]http://dl.iteye.com/upload/attachment/0064/6565/3f5acfc8-c756-3ef4-9778-20f2ee919901.jpg
[/img]


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

详细出处参考：http://www.jb51.net/article/13019.htm