html 点击a标签弹出浏览文件

最新推荐文章于 2025-03-10 11:26:34 发布

weixin_33712881

最新推荐文章于 2025-03-10 11:26:34 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： c#

原文链接：https://my.oschina.net/body/blog/744564

本文介绍了一个包含HTML结构的示例代码，通过分析该代码可以了解基本的网页布局和交互实现方式，包括使用CSS进行样式设置及JavaScript实现文件选择功能。

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

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html>
<head>
<title>img.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
   *{padding:0;margin:0;}
   body{font-size:12px;font-family:"微软雅黑";color:#666;background-color:#000;}
   .mmd{width:900px;height:350px;margin:100px auto;position:relative;}
   .mmd .m_msg{
       width:355px;height:80px;background:#fff;position: absolute;top:180px;left:40px;border-radius:6px;
       padding:10px;
   }
   .mmd .m_msg .m_text{width:355px;height:80px;border:1px solid #eee;border-radius:3px;}
   .mmd .m_msg .m_text a{
       width:78px;height:60px;display:block;border-right:1px solid #eee;text-align:center;text-decoration: none;color:#9b9b9b;
       padding-top:20px;
   }
   .mmd .m_msg .m_text a:hover{background:#f2f2f2;}
   .mmd .m_msg .m_text a span{width:30px;height:23px;display:block;border:1px solid red;margin:0 auto;
       background-position:0px 0px;
       margin
   }
   .mmd .m_msg .m_text a input{display:none;}

</style>

</head>

<body>
<div class="mmd">
   <div class="m_msg">
       <div class="m_text">
           <a href="#" onclick="openBrowse()">
               <span></span>
               图片
           </a>
           <input type="file" id="file" />
           <input type="text" id="fileName" />
       </div>
   </div>
</div>
<script>
   function openBrowse(){
       var ie = navigator.appName = "Microsoft Internet Explorer"?true:false;
       if(ie)
       {
           document.getElementById("file").click();
           document.getElementById("fileName").value = document.getElementById("file").value;
       }else{
           var a = document.createEvent("MouseEvents");
           a.initEvent("click",true,true);
           document.getElementById("file").dispatchEvent(a);
       }
   }
</script>
</body>
</html>