文档章节

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

w
 wangwenya
发布于 2014/09/07 11:13
字数 137
阅读 19403
收藏 5

第一种: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" 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>

© 著作权归作者所有

w
粉丝 3
博文 94
码字总数 33768
作品 0
广州
私信 提问
9. Selenium -- 常用操作方法2

上节我们已经介绍了几个常用的控件操作方法,理论上已经可以操作绝大多数控件,同样WebDriver提供了一些特殊方法,用于操作一些特殊情况。 下拉框操作 下拉框操作除了通过两次点击(1.点击下...

米阳MeYoung
2018/06/12
0
0
实现点击图片弹出选择文件窗口

很多时候,需要实现这样的效果:用户已经上传头像,点击头像之后直接弹出图片选择窗口。 可以通过如下代码实现: 原理就是:将input覆盖住要点击的图片或者超链或者其它div,然后将input设置...

Hades
2016/09/27
57
0
带领大家一起做一个ThinkPHP整合jcrop图片上传裁切预览的例子

博客已转移:PHP上传裁切 发现经常有人在技术群里问要PHP图片上传裁切并且预览的例子。今天正好有时间,就亲自做了一个,同时把方法公布出来,让大家可以理解,学会如何用ThinkPHP+jcrop做这...

3147972
2013/12/05
0
0
学习笔记:对下拉菜单的简单封装

第一部分 实现效果 当我们点击一下标题按钮时,就弹出一个下拉菜单,点一下其他地方,下拉菜单退出或者从屏幕上消失 效果如下图: 当我们点击一下首页的时候,弹出下拉菜单,效果如下图(当然...

不孤独的美食家
2015/10/20
311
0
Xshell + WinSCP操作远程服务器

在Windows下对远程服务器操作(命令行、文件上传和下载)需要两方面的工具,一是连接服务器进行命令操作,二是连接服务器进行文件的上传和下载。前者我们通过Xshell实现,后者利用WinSCP实现...

王诗翔
2018/02/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
4
0
前端技术之:webpack热模块替换(HMR)

第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware 第二步:webpack配置中引入webpack对象 const webpack = require('webpack’); 第三步:增加devServer配置项: ho......

popgis
昨天
4
0
死磕 java线程系列之线程池深入解析——体系结构

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 Java的线程池是块硬骨头,对线程池的源码做深入研究不仅能提高对Java整个并发编程的理解,也能提高自己...

彤哥读源码
昨天
4
0
虚函数表 图解

虚函数表 图解 p504

天王盖地虎626
昨天
3
0
java反射

学习目标  什么是反射  反射运行原理  了解反射机制的相关类  获取 class 对象的 3 种方式  通过反射获取构造方法并使用  通过反射获取成员变量并调用  通过反射获取成员方法并...

流川偑
昨天
4
2

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部