【前端丨学习笔记】点击弹出选择文件上传的窗口

Amy · 发表于 2018-12-21 17:04:35

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

1、HTML+CSS实现
<input type="file">可定义输入字段和 "浏览"按钮，供文件上传。例如：

[HTML] 纯文本查看 复制代码

<style type="text/css">
    div{
        position: relative;
    }
    input{
        opacity:0;
        filter:alpha(opacity=0);
        height: 40px;
        width: 100px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
    }
    button{
        width: 100px;
        height: 40px;
    }
</style>
</head>
<body>
    <div>
        <input type="file">
        <button>上传文件</button>
    </div>
</body>

2、HTML+JS实现

[HTML] 纯文本查看 复制代码

<script type="text/javascript">
function F_Open_dialog() 
{ 
document.getElementById("btn_file").click(); 
} 

</script>
</head>
<body>
<div>
<input type="file" id="btn_file" style="display:none">
<button type="button">选择文件</button>
</div>
</body>

		自动登录	找回密码
密码			马上注册

[零基础学习web前端] 【前端丨学习笔记】点击弹出选择文件上传的窗口

相关帖子