我是靠谱客的博主 鳗鱼乌冬面,最近开发中收集的这篇文章主要介绍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>&nbsp;
<div class="fileInputContainer"><input class="fileInput" id="" type="file" name=""></div>

 

第二种:JavaScript实现

<div class="face">
 <p><img class="normalFace" src="./images/upload.jpg" οnclick="fileSelect();"></p>
 <form id="form_face" enctype="multipart/form-data" style="width:auto;">
  <input type="file" name="fileToUpload" id="fileToUpload" οnchange="fileSelected();" style="display:none;">
 </form>
  </div>
  <script type="text/javascript">
    function fileSelect() {
        document.getElementById("fileToUpload").click(); 
    }
    
    function fileSelected() {
      // 文件选择后触发次函数
    }
  </script>

最后

以上就是鳗鱼乌冬面为你收集整理的HTML+js+css实现点击图片弹出上传文件窗口的两种思路的全部内容,希望文章能够帮你解决HTML+js+css实现点击图片弹出上传文件窗口的两种思路所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(42)

评论列表共有 0 条评论

立即
投稿
返回
顶部