网站地图    收藏   

主页 > 前端 > css教程 >

修改file按钮的样式 - html/css语言栏目:html.css -

来源:自学PHP网    时间:2015-04-14 14:50 作者: 阅读:

[导读] [html] !DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd html xmlns=http://www.w3.org/1999/xhtml html head title添加附......

[html]  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<html>  
 <head>  
  <title>添加附件</title>  
 </head>  
<script type="text/javascript" src="jquery-1.8.0.js"></script>  
  <script type="text/javascript">  
   function fclick(obj){  
      style.posTop=event.srcElement.offsetTop   
      style.posLeft=event.x-offsetWidth/2  
   }  
   $(function(){  
        $("#addFile").click(function(){  
            var br = $("<br>");  
            var input1 = $("<input id='inputrecievedocument' type='text'/>");  
            var input2 = $("<input type='button' style='margin-left:5px;background-color:blue' id='btnrecievedocument' onmouseover='fclick(t_file)' value='浏览'/>");  
            var input3 = $("<input name='upfile' type='file' style='position:absolute;filter:alpha(opacity=0);width:70px;' id='t_file' onchange='inputrecievedocument.value=this.value' hidefocus/>");  
            var button = $("<input type='button' value='删除' style='margin-left:5px;background-color:blue'/>");  
            $("#file").append(br).append(input1).append(input3).append(input2).append(button);  
            button.click(function() {  
                br.remove();  
                input1.remove();  
                input2.remove();  
                input3.remove();  
                button.remove();  
            });  
          
        });  
          
   });  
  </script>  
 <body class="body">  
  <form method="post" action="" enctype="multipart/form-data">  
  <input type="button" value="添加附件" class="btn_fujian" id="addFile" style="margin-left:20px;margin-top:2px;"/>  
   <div id="file"></div>  
   
  </form>  
 </body>  
</html>  
 
IE9中运行如下:

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论