苏飞论坛

标题: 【前端丨学习笔记】点击弹出选择文件上传的窗口 [打印本页]

作者: Amy 时间: 2018-12-21 17:04
标题: 【前端丨学习笔记】点击弹出选择文件上传的窗口
【前端丨学习笔记】点击弹出选择文件上传的窗口

【零基础学习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>

作者: 站长苏飞 时间: 2018-12-21 17:12
我只是路过打酱油的。

作者: liu 时间: 2018-12-22 11:19
我只是路过打酱油的。

作者: 竹林风 时间: 2018-12-22 12:05
感恩无私的分享与奉献

作者: 惜 时间: 2018-12-24 10:21
强烈支持楼主ing……

作者: 范范 时间: 2018-12-25 13:54
太生气了，无法HOLD啦 >_<......

作者: 竹林风 时间: 2018-12-25 17:18
感恩无私的分享与奉献

作者: 火星的泪 时间: 2018-12-26 11:20
看到这帖子真是高兴！

欢迎光临苏飞论坛 (http://www.sufeinet.com/)