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

<code>    <img  src="a.jpg" alt="javascript - 点击一个图片弹出文件选择进行上传，怎么做?" >
</code>

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

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

2. 用html和jquery怎么实现?

回复内容：

<code>    <img  src="a.jpg" alt="javascript - 点击一个图片弹出文件选择进行上传，怎么做?" >
</code>

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

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

2. 用html和jquery怎么实现?

1、html+css实现

<code>   


    <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>


    <div>
        <input type="file">
        <img  src="http://7u2nae.com1.z0.glb.clouddn.com/2.jpg" alt="javascript - 点击一个图片弹出文件选择进行上传，怎么做?" >
    </div>



</code>

demo:https://jsfiddle.net/dwqs/kL2xwbgm/embedded/result/

2、html+js(jq)

<code>    


    <meta charset="utf-8">
    <title>Demo</title>
    <script type="text/javascript">
        function F_Open_dialog() 
       { 
            document.getElementById("btn_file").click(); 
       } 

    </script>


    <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()" alt="javascript - 点击一个图片弹出文件选择进行上传，怎么做?" >
    </div>



</code>

demo:https://jsfiddle.net/dwqs/ckfs1zg5/embedded/result/

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