file表单元素怎样设置浏览按钮的样式

我们在程序开发中,经常要用到上传文件的功能。但是,<input type="file" id="f" name="f">这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要。怎么样才能控制控制它们的样式和位置呢?
 
  解决思路:
    1、放一个text类型的文本框。
    2、放一个button类型的按扭。
    3、放一个file类型。
    4、调整button和file的样式,目标:将file隐藏,使其位置和button位置重叠。
    5、当上传框file的值有所改变时通过onchange事件句柄执行text.value=this.value,即保持真正的上传框与模拟的上传框的值同步更新。
    总结:上传框带有两个控件:一个文本框和一个按钮。定义的样式对文本框全部生效,对于按钮,只有边框样式、字体大小和外观尺寸生效。看来直接用CSS定义它的外观是行不通的。我们知道,大部分控件都有一个单击(click)事件句柄,上传框在单击"浏览..."按钮时会弹出"选择文件"对话框,如果我们自己模拟一个上传框:一个文本框(<input type="text">)和一个按钮(<input type="button">或<button>Text</button>),在单击自定义按钮时同时触发上传框的click事件让它弹出"选择文件"对话框... ...。在点击"上传文件"按钮时执行t_file.click(),当上传框的值有所改变时通过onchange事件句柄执行f_file.value=this.value,即保持真正的上传框与模拟的上传框的值同步更新,style="display:none"让真正的上传框隐藏,使模拟的文件上传框能以假乱真------。
    代码示例:
    <style>input{border:1px solid green;}
      div {width:300px;position:relative;}
      p {float:left}
      .file {position:absolute;top:20px;right:300px;+top:0;+right:73px;width:0px;height:20px;
              filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
      #txt {height:20px;margin:1px}
      #ii {width:70px;height:20px;margin-top:2px;border:none;}
  </style>

  <div>
        <form method="post" action="" enctype="multipart/form-data">
        <p><input type="text" id="txt" name="txt" /></p>
        <p><input id="ii" type="image" src="uploads/200702/05_125319_index_search_02.gif" value="选择" /></p>
        <p><input type="file" οnchange="txt.value=this.value" class="file" /></p>
      </form>
</div>

      具体可以参照:http://blog.ha371.com/article.asp?id=34&page=3
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值