开发者社区> 问答> 正文

点击一个图片弹出文件选择进行上传,怎么做?

有这样一个图片,我想实现的是,当点击这个图片的时候,实现自动弹出的动作,弹出文件选择框,选完直接上传。

1.用纯js和html怎么实现?

2.用html和jquery怎么实现?

展开
收起
杨冬芳 2016-06-16 13:42:09 2091 0
1 条回答
写回答
取消 提交回答
  • IT从业

    、html+css实现

       <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <style type="text/css">
            div
            {
                position: relative;
            }
            input
            {
                opacity:0;
                filter:alpha(opacity=0);
                height: 95px;
                width: 100px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 9;
            }
        </style>
    </head>
    <body>
        <div>
            <input type="file">
            <img src="http://7u2nae.com1.z0.glb.clouddn.com/2.jpg">
        </div>
    
    </body>
    </html>
    
    
    demo:https://jsfiddle.net/dwqs/kL2xwbgm/embedded/result/点击预览
    
    2、html+js(jq)
    
        <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <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">
            <img src="http://7u2nae.com1.z0.glb.clouddn.com/2.jpg" onclick="F_Open_dialog()">
        </div>
    
    </body>
    </html>
    

    demo:https://jsfiddle.net/dwqs/ckfs1zg5/embedded/result/点击预览

    在IE、FF、GG现代浏览器测试过

    2019-07-17 19:40:44
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载