一聚教程网:一个值得你收藏的教程网站

#"http://www.hnzuizuihou.com/fw/photo.html" target="_blank">ps教程 | #"http://www.hnzuizuihou.com/flash_a/flash.html" target="_blank">flash教程 | #"http://www.hnzuizuihou.com/router/index.html" target="_blank">路由器设置 | #"http://www.hnzuizuihou.com/jsp/jsp.html" target="_blank">Jsp教程 | #"#" title="收藏本站" target="_self">加入收藏

推荐专题

  • #"http://www.hnzuizuihou.com/zhuanti/aijianji/" target="_blank">爱剪辑怎么使用_爱剪辑使用教程 #"http://www.hnzuizuihou.com/zhuanti/aijianji/" title="爱剪辑怎么使用" alt="爱剪辑怎么使用" target="_blank">爱剪辑怎么使用
  • #"http://www.hnzuizuihou.com/zhuanti/yundingzhiyi/" target="_blank">云顶之弈攻略_云顶之弈图文攻略 #"http://www.hnzuizuihou.com/zhuanti/yundingzhiyi/" title="云顶之弈攻略" alt="云顶之弈攻略" target="_blank">云顶之弈攻略
  • #"http://www.hnzuizuihou.com/zhuanti/xiaolandanche/" target="_blank">小蓝单车怎么使用_小蓝单车使用教程 #"http://www.hnzuizuihou.com/zhuanti/xiaolandanche/" title="小蓝单车怎么使用" alt="小蓝单车怎么使用" target="_blank">小蓝单车怎么使用
  • #"http://www.hnzuizuihou.com/zhuanti/meipaidashi/" target="_blank">美拍大师怎么使用_美拍大师使用教程 #"http://www.hnzuizuihou.com/zhuanti/meipaidashi/" title="美拍大师怎么使用" alt="美拍大师怎么使用" target="_blank">美拍大师怎么使用

最新下载

  • 1 #"http://www.hnzuizuihou.com/anzhuo/39913.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39913.htm" title="疯狂红单下载 疯狂红单安卓版下载" alt="疯狂红单下载 疯狂红单安卓版下载" target="_blank">疯狂红单

    大小:48.6 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/rj_418.htm" target="_blank">学习理财
  • 2 #"http://www.hnzuizuihou.com/anzhuo/39916.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39916.htm" title="热血三国群英下载 热血三国群英安卓版下载" alt="热血三国群英下载 热血三国群英安卓版下载" target="_blank">热血三国群英

    大小:163.1 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/wy_394.htm" target="_blank">三国网游
  • 3 #"http://www.hnzuizuihou.com/anzhuo/39915.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39915.htm" title="疯狂小鸡钻钻钻下载 疯狂小鸡钻钻钻安卓版下载" alt="疯狂小鸡钻钻钻下载 疯狂小鸡钻钻钻安卓版下载" target="_blank">疯狂小鸡钻钻钻

    大小:21.8 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/dj_396.htm" target="_blank">益智休闲
  • 4 #"http://www.hnzuizuihou.com/anzhuo/39914.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39914.htm" title="屠魔西游无限果盘版下载 屠魔西游无限果盘版安卓版下载" alt="屠魔西游无限果盘版下载 屠魔西游无限果盘版安卓版下载" target="_blank">屠魔西游无限果盘版

    大小:174.0 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/wy_390.htm" target="_blank">仙侠网游
  • 5 #"http://www.hnzuizuihou.com/anzhuo/39912.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39912.htm" title="脑裂左右互博术下载 脑裂左右互博术安卓版下载" alt="脑裂左右互博术下载 脑裂左右互博术安卓版下载" target="_blank">脑裂左右互博术

    大小:33.4 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/wy_392.htm" target="_blank">卡牌网游
  • 6 #"http://www.hnzuizuihou.com/anzhuo/39910.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39910.htm" title="3D武汉麻将下载 3D武汉麻将安卓版下载" alt="3D武汉麻将下载 3D武汉麻将安卓版下载" target="_blank">3D武汉麻将

    大小:16.0 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/wy_392.htm" target="_blank">卡牌网游
  • 7 #"http://www.hnzuizuihou.com/anzhuo/39904.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39904.htm" title="七星龙珠下载 七星龙珠安卓版下载" alt="七星龙珠下载 七星龙珠安卓版下载" target="_blank">七星龙珠

    大小:2.7 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/dj_402.htm" target="_blank">动作游戏
  • 8 #"http://www.hnzuizuihou.com/anzhuo/39899.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39899.htm" title="真香饭店下载 真香饭店安卓版下载" alt="真香饭店下载 真香饭店安卓版下载" target="_blank">真香饭店

    大小:25.8 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/wy_393.htm" target="_blank">策略塔防
  • 9 #"http://www.hnzuizuihou.com/anzhuo/39902.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39902.htm" title="牛票票下载 牛票票安卓版下载" alt="牛票票下载 牛票票安卓版下载" target="_blank">牛票票

    大小:220.6 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/rj_418.htm" target="_blank">学习理财
  • 10 #"http://www.hnzuizuihou.com/anzhuo/39901.htm" class="img" target="_blank">

    #"http://www.hnzuizuihou.com/anzhuo/39901.htm" title="炒地皮升级下载 炒地皮升级安卓版下载" alt="炒地皮升级下载 炒地皮升级安卓版下载" target="_blank">炒地皮升级

    大小:14.4 MB 类型:#"http://www.hnzuizuihou.com/anzhuo/dj_399.htm" target="_blank">卡牌棋牌

热门教程

  • 1

    #"http://www.hnzuizuihou.com/xinxianshi/167525.htm" title="淦是什么梗 淦是什么意思" alt="淦是什么梗 淦是什么意思" target="_blank">淦是什么梗 淦是什么意思

    时间:2018-10-24 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加
  • 2

    #"http://www.hnzuizuihou.com/xinxianshi/168185.htm" title="你就是个弟弟是什么梗 你就是个弟弟什么意思" alt="你就是个弟弟是什么梗 你就是个弟弟什么意思" target="_blank">你就是个弟弟是什么梗 你就是个弟弟什么意思

    时间:2018-11-10 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加
  • 3

    #"http://www.hnzuizuihou.com/xinxianshi/162309.htm" title="突然被cue是什么意思 cue是什么梗" alt="突然被cue是什么意思 cue是什么梗" target="_blank">突然被cue是什么意思 cue是什么梗

    时间:2018-06-21 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加
  • 4

    #"http://www.hnzuizuihou.com/xinxianshi/174502.htm" title="抖音嘿依莲妈妈是什么歌 歌曲分享" alt="抖音嘿依莲妈妈是什么歌 歌曲分享" target="_blank">抖音嘿依莲妈妈是什么歌 歌曲分享

    时间:2019-06-22 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加
  • 5

    #"http://www.hnzuizuihou.com/xinxianshi/173997.htm" title="潘南奎潘十亿是什么梗 潘南奎为什么叫潘十亿" alt="潘南奎潘十亿是什么梗 潘南奎为什么叫潘十亿" target="_blank">潘南奎潘十亿是什么梗 潘南奎为什么叫潘十亿

    时间:2019-06-10 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加
  • 6

    #"http://www.hnzuizuihou.com/xinxianshi/174868.htm" title="everybody在你头上暴扣是什么梗 everybody在你头上暴扣什么意思" alt="everybody在你头上暴扣是什么梗 everybody在你头上暴扣什么意思" target="_blank">everybody在你头上暴扣是什么梗 everybody在你头上暴扣什么意思

    时间:2019-07-04 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加
  • 7

    #"http://www.hnzuizuihou.com/sj/169214.htm" title="抖音资料被锁定要多久 抖音资料被锁定的解决方法" alt="抖音资料被锁定要多久 抖音资料被锁定的解决方法" target="_blank">抖音资料被锁定要多久 抖音资料被锁定的解决方法

    时间:2018-12-26 类型:#"http://www.hnzuizuihou.com/list-213/" target="_blank">手机软件
  • 8

    #"http://www.hnzuizuihou.com/xinxianshi/173284.htm" title="抖音你笑起来真好看像春天的花一样是什么歌 歌曲分享" alt="抖音你笑起来真好看像春天的花一样是什么歌 歌曲分享" target="_blank">抖音你笑起来真好看像春天的花一样是什么歌 歌曲分享

    时间:2019-05-07 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加
  • 9

    #"http://www.hnzuizuihou.com/xinxianshi/168624.htm" title="叙利亚雇佣兵是什么梗 叙利亚雇佣兵什么意思" alt="叙利亚雇佣兵是什么梗 叙利亚雇佣兵什么意思" target="_blank">叙利亚雇佣兵是什么梗 叙利亚雇佣兵什么意思

    时间:2018-12-01 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加
  • 10

    #"http://www.hnzuizuihou.com/xinxianshi/167498.htm" title="被透了是什么梗 被透了什么意思" alt="被透了是什么梗 被透了什么意思" target="_blank">被透了是什么梗 被透了什么意思

    时间:2018-10-24 类型:#"http://www.hnzuizuihou.com/list-207/" target="_blank">互联网加

平安开奖直播900566.com

时间:2015-06-27 00:00:00 编辑:简简单单 来源:原创


在#"http://www.hnzuizuihou.com/wy/yw.html" target="_blank">平安国际娱乐平台过程中,有时需要进行上传文件,当然如果需要上传的是图片也是属于文件的。

默认的

的样式如下:

#"#" target="_blank">捕获

而我们希望使用一张图片代替,点击即可实现上传文件的功能。

希望改成的样式如下:

#"#" target="_blank">捕12获

首先,难点是:

1、不同浏览器的样式表现不同。
2、文字如果只用click这样的方式是不可以的。
3、input 上的文字是没有办法更改的。

实现的想法是:把input 放在图片的上边,弄成透明的,这样在点图片时,实际是点击了input,这样就实现了文件的上传。完全使用#"http://www.hnzuizuihou.com/cssdiv/css.html" class="anchor" target="_blank">css,也可以使用js。

html:




#"http://www.hnzuizuihou.com/cssdiv/css/images/upload-pic.png" target="_blank">上传照片

css:

.upload-img{
position: relative;
float: right;
margin: 7px 20px 0 0;
overflow: hidden;
}
.upload-img img{
width: 58px;
height: 58px;
 
}
 
.comment-pic-upd{
position: absolute;
top: 0;
left: 0;
 
z-index: 100;
width: 58px;
height: 58px;
 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity: 0;
opacity:0;
background: none;
border: none;
cursor: pointer;
}


再看一种风格的例子






平安开奖直播900566.com:定义input type="file" 的样式




 


  
 
   
 
 



效果如下

#"#" target="_blank">点击查看原图

 

例子三,input上传按钮美化

input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。

代码如下:

DOM结构:

#"#"http://www.hnzuizuihou.com/js_a/js.html" target="_blank">javascript:;" class="a-upload">
    点击这里上传文件

#"#" class="file">选择文件
   

CSS样式1:

/*a  upload */
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}
样式2:

.file {
    position: relative;
    display: inline-block;
    background: #D0EEFF;
    border: 1px solid #99D3F5;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1E88C7;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #AADFFD;
    border-color: #78C3F3;
    color: #004974;
    text-decoration: none;
}


修改后如下:

#"#" target="_blank">enter image description here

 

样式二:

 

#"#" target="_blank">enter image description here

文章评论

热门栏目