杯中水1129_909 发布于 2017-05-10 08:34
    

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

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

  2. 用html和jquery怎么实现?

1 个回答
  • 1、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现代浏览器测试过

    2017-05-10 19:00 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
活跃用户
  • 1
    问道摩托
  • 2
    袁广龙976丶
  • 3
    逍遥子
  • 4
    亮仔
  • 5
    芙蓉花
  • 6
    作小die_syj
  • 7
    mobiledu2502875483
  • 8
    王丽珠景平怡伦_621
  • 9
    adfa3sd5f6a
  • 10
    欣欣大妮
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有