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

    第一种:CSS实现

    <style>
    <!--
     .fileInputContainer{
            height:256px;
            background:url(upfile.png);
            position:relative;
            256px;
        }
        .fileInput{
            height:256px;
            overflow: hidden;
            font-size: 300px;
            position:absolute;
            right:0;
            top:0;
            opacity: 0;
            filter:alpha(opacity=0);
            cursor:pointer;
        }
    -->
    </style>&nbsp;
    <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="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>

  • 相关阅读:
    P1579哥德巴赫猜想
    JAVA快速入门方法
    PHP快速入门方法
    Java 8 lambda表达式
    JVM内存配置参数
    Synchronized 关键字
    数据库事务的理解
    hello world 执行原理
    面试知识点总结之JVM调优
    面试知识点总结之RabbitMQ/Kafka使用场景
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4500200.html
Copyright © 2011-2022 走看看