博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>input file的另类做法</title> 
<style type="text/css"> 
<!-- 
#input1{border:1px solid #0000FF} 
#btn1{width:70px;height:21px;font-size:12px;padding-top:3px;border-left:1px solid #FFFFFF;border-top:1px solid #FFFFFF;border-

right:1px solid #666666;border-bottom:1px solid #666666} 
//--> 
</style> 


</head> 

<body> 
<input type="text" id="input1"> <span style=" margin-left:50px;"><input type="button" id="btn1" onclick="myfile.click();" value="浏览文档"></span> 
<input type="file" id="myfile" onchange="input1.value=this.value" style="display:none">


</body> 
</html>
<script type="text/javascript">
/*
**1.直接在上面的htnl中写和在下面写时一样的效果
**2.input1文本框可以是有背景图片的
**3.btn1即浏览按钮可以是图片

  $('#myfile').die('change').live('change',function(){
          $('#input1').val($(this).val());
         })
   
  $('#btn1').die('click').live('click',function(){
       $('#myfile').click();
       $('#input1').val($('#myfile').val());
      })
  */

</script>