上传图片的美化

1 <input type="text" name="textfield" value="{$data.litpic}" id="textfield" class="txt" / >
2 <input type="button" class="btn" value="浏览">
3 <input type="file" name="litpic" value="" class="addLitpic" size="28" onChange="document.getElementById('textfield').value=this.value"/>

 1 .txt{
 2     height:22px;
 3     width:180px;
 4     border:1px solid #cdcdcd; 
 5 }
 6 .btn{
 7     width:70px;
 8     height:24px;
 9     border:1px solid #cdcdcd;
10     background:#FFF;
11 }
12 .addLitpic{
13     height:24px;
14     width:260px;
15     position:absolute;
16     top:196px;
17     left:39px;
18     filter:alpha(opacity:0);
19     opacity:0;
20 }

将type="file"部分覆盖到type="text"表层，然后用filter:alpha(opacity:0); opacity:0;将表层设置成透明即可。

锁解决问题：

　　1.在框内可以显示value值；

　　2.可以美化界面；

　　3.只显示文件名，不显示c:\.....这样的路径。

如图：