文档章节

修改Uploadify上传插件的按钮为超链接

藍色的海
 藍色的海
发布于 2012/12/31 13:27
字数 371
阅读 4021
收藏 4

因为最近要用到上传功能,之前一直是用jspsmartupload组件上传,一直以来觉得jquery插件的界面好炫,而且在web的各种组件中都有很多不同但功能都很强大的插件,于是搜索了下,选择了uploadify,经过尝试,实现了上传功能,但要求是点击超链接实现上传功能。第一反应我想就是通过css文件来控制的,于是找到uploadify的样式文件uploadify.css,把控制按钮样式的相关css注释掉

/*  .uploadify-button {
    background-color: #505050;
    background-image: linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #505050),
        color-stop(1, #707070)
    );
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border: 2px solid #808080;
    color: #FFF;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    width: 100%;
}  */
/* .uploadify:hover .uploadify-button {
    background-color: #606060;
    background-image: linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #606060),
        color-stop(1, #808080)
    );
    background-position: center bottom;
}  */

加上自己的css控制:

 .uploadify-button {
  
    text-decoration:underline;
    color:blue
}
 .uploadify:hover .uploadify-button {
  
    text-decoration:underline;
    color:green
}

界面修改前后如下,当然修改后的不是真正的<a>标签超链接

demo上传按钮:

修改后:

假如设置 'buttonText':'select a file to upload...',效果如下:

鼠标移动文字上面效果

© 著作权归作者所有

藍色的海
粉丝 3
博文 19
码字总数 7205
作品 0
广州
其他
私信 提问
Django用uploadify实现图片批量上传

分享一下在Django中使用uploadify——一个jQuery批量上传插件——的方法。github上的django-uploadify使用的是2.1.4版本,上传button只能使用图片,不能很方便的修改样式。本文针对的是uploa...

红薯
2012/03/06
2.4K
2
jquery文件上传控件 Uploadify

jquery文件上传控件 Uploadify 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件。 要求使用jquery1.4或以上版本,flash player 9.0.24...

蜗牛奔跑
2015/07/21
0
0
JQuery上传插件Uploadify使用详解及错误处理

上面的代码就简单实现了上传的功能,依靠函数uploadify实现,uploadify函数的参数为json格式,可以对json对象的key值的修改来进行自定义的设置,如multi设置为true或false来控制是否可以进行...

商者
2016/07/15
10
0
基于uploadify.js实现多文件上传和上传进度条的显示

  uploadify是JQuery的一个插件,主要实现文件的异步上传功能,可以自定义文件大小限制、文件类型、是否自动上传等属性,可以显示上传的进度条。官网地址是http://www.uploadify.com/,进入...

雲霏霏
2014/12/08
0
0
uploadify 实现文件上传

uploadify官网我们需要到官网上下载需要的插件引入到项目中,同时我们最好看看uploadify的中文文档,当然直接把下面的代码复制作为一个工具类也行,反正都是大同小异. 如何实现图片上传功能? 在...

coderzs
2017/10/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

47.Nginx安装 默认虚拟主机 用户认证 域名重定向

12.6 Nginx安装 12.7 默认虚拟主机 12.8 Nginx用户认证 12.9 Nginx域名重定向 扩展 nginx.conf 配置详解 http://www.ha97.com/5194.html http://my.oschina.net/duxuefeng/blog/34880 nginx......

oschina130111
21分钟前
2
0
vue+element 封装弹窗

子组件: <template> <el-dialog title="" :visible.sync="dialogVisible" :before-close="handleCloseBindWarnStandard" width="500px"> <el-form label-width="100px"> <el-form-item prop......

羊皮卷
36分钟前
2
0
ABB变送器大胆创新实现技术突破

本文关键字:ABB变送器http://www.whdkm.cn/ 虽然市场上变送器传感器种类繁多,但是近几年传感器的技术创新速度却是比较缓慢,这是由于大多数用户宁可坚持使用久经经验的技术,而不愿冒险采用...

whdkm666
39分钟前
2
0
TPA2080D1相关介绍

TPA2080D1相关介绍 1说明 TPA2080D1器件是一款高效D类音频功率放大器,集成了G类升压转换器,可在低输出功率下提高效率。它可以驱动高达2.2 W的4-Q扬声器(1%THD + N)。 TPA2080D1具有85%...

不能吃肉的仙女
44分钟前
2
0
今日大暑,JEPaaS提醒您注意防暑降温

“大暑,六月中。暑,热也,就热之中分为大小,月初为小,月中为大,今则热气犹大也。” 天气炎热,JEPaaS提醒您注意防晒,预防中暑。

JEPaaS云平台
46分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部