HTML+js+css实现点击图片弹出上传文件窗口的两种思路

第一种：CSS实现

 

<style>

<!--

 .fileInputContainer{

        height:256px;

        background:url(upfile.png);

        position:relative;

        width: 256px;

    }

    .fileInput{

        height:256px;

        overflow: hidden;

        font-size: 300px;

        position:absolute;

        right:0;

        top:0;

        opacity: 0;

        filter:alpha(opacity=0);

        cursor:pointer;

    }

-->

</style> 

<div class="fileInputContainer"><input class="fileInput" id="" type="file" name=""></div>

 

第二种：JavaScript实现

<div class="face">

 <p><img class="normalFace" src="./images/upload.jpg" onclick="fileSelect();"></p>

 <form id="form_face" enctype="multipart/form-data" style="width:auto;">

  <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();" style="display:none;">

 </form>

  </div>

  <script type="text/javascript">

    function fileSelect() {

        document.getElementById("fileToUpload").click(); 

    }

    

    function fileSelected() {

      // 文件选择后触发次函数

    }

  </script>