uploadify 上传按钮改变

最新推荐文章于 2021-01-28 18:07:43 发布

haoyuzhijiao

最新推荐文章于 2021-01-28 18:07:43 发布

阅读量933

点赞数

本文详细介绍了如何使用uploadify进行上传按钮的深度定制，包括修改按钮文字、背景图片及样式，以及背景图片与按钮文字的完美融合，提供了一个完整的实例包下载地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

玩转 uploadify 之一上传按钮大变身

六月 22, 2012

桖晞二零一二

4 评论

之前写了个 jquery + uploadify 安装的文章，结果发现是被阅读最多的，那么从今天起我就写个uploadify的系列文章，让想用它大展身手的同学能有所突破。

官方给的默认按钮就是一个黑黑的看起来不那么舒服。之前的版本图片上的文字还不支持中文，简直令人发指。还好目前3.1的版本可以支持改背景图，改文字。那我们就来对上传按钮做个彻底大变身。

首先第一步，保证你已经在页面上正确安装了uploadify，还不会装的同学看看我之前的文章 jquery uploadify 的组合心得（安装篇）

如果你已经正确安装了，那么在浏览器里打开页面应该看到如下的上传按钮

第二步，修改按钮上的文字，修改

 
         <
         script 
          type
         =
         "text/javascript"
         >
        
         $(function() {
        
         $('#file_upload').uploadify({
        
         'swf'      : 'uploadify.swf',
        
         'uploader' : 'uploadify.php',
        
         'buttonText' : '上传'
        
         // Your options here
        
         });
        
         });
        
         </
         script
         >

在查看页面的时候，也许会出现文字还是乱码的现象，这个是你没有设置浏览器查看网页的编码方式，把它和你的页面文件编码方式设置成一样即可。（PS.这个方法可以处理绝大多数页面中文乱码的情况）
比如我的HTML文件编码是UTF8的，那么我就在HTML文件的<head>标签中加入

1	`<` `meta` `http-equiv` `=` `"Content-Type"` `content` `=` `"text/html; charset=UTF-8"` `/>`

保存HTML文件，我们看到如下按钮

有的时候，修改文字已经不能满足我们强大的欲望了。那么我们开始着手修改背景图片。

首先准备好一张你要替换的背景图片，要求是png格式的。

然后修改生成uploadify的语句

 
         <
         script 
          type
         =
         "text/javascript"
         >
        
         $(function() {
        
         $('#file_upload').uploadify({
        
         'swf'      : 'uploadify.swf',
        
         'uploader' : 'uploadify.php',
        
         'buttonText' : '上传',
        
         'buttonImage' : 'browse-btn.png',
        
         // Your options here
        
         });
        
         });
        
         </
         script
         >

用浏览器访问一下你的页面

背景修改成功。但是上面修改的按钮文字已经看不到了，这里说一下，如果设置了背景图片，那么按钮文字就被自动隐藏了。

我们发现，修改后的背景图片还有个黑边，并不是完全图片的效果。这里就需要加点样式进去，把黑边给去了

 
         <
         style 
          type
         =
         "text/css"
         >    .uploadify-button {
        
         background-color: transparent;
        
         border: none;
        
         padding: 0;
        
         }
        
         .uploadify:hover .uploadify-button {
        
         background-color: transparent;
        
         }
        
         </
         style
         >

这段样式可以加在<head>或者<body>标签内部

好了，至此打工告成。

在说点提高的小窍门，同学们可以看到，我给出的背景图是60像素高的，标准的uploadify的背景图是30像素高、120像素宽，所以我们如果导入的是120X60像素的图片，那么uploadify会默认加载0-30像素的图片，当鼠标移动上去后编成30-60像素的图片。很好的实现了鼠标移入的效果，赞一个，uploadify确实做的不错。

最后附上全部代码：

 
         <!DOCTYPE html>
        
         <
         html
         >
        
         <
         head
         >
        
         <
         title
         >My Uploadify Implementation</
         title
         >
        
         <
         meta 
          http-equiv
         =
         "Content-Type" 
          content
         =
         "text/html; charset=UTF-8" 
          />
        
         <
         link 
          rel
         =
         "stylesheet" 
          type
         =
         "text/css" 
          href
         =
         "uploadify.css"
         >
        
         <
         script 
          type
         =
         "text/javascript" 
          src
         =
         "http://code.jquery.com/jquery-1.7.2.min.js"
         ></
         script
         >
        
         <
         script 
          type
         =
         "text/javascript" 
          src
         =
         "jquery.uploadify-3.1.min.js"
         ></
         script
         >
        
         <
         script 
          type
         =
         "text/javascript"
         >
        
         $(function() {
        
         $('#file_upload').uploadify({
        
         'swf'      : 'uploadify.swf',
        
         'uploader' : 'uploadify.php',
        
         'buttonText' : '上传',
        
         'buttonImage' : 'browse-btn.png',
        
         // Your options here
        
         });
        
         });
        
         </
         script
         >
        
         <
         style 
          type
         =
         "text/css"
         >
        
         .uploadify-button {
        
         background-color: transparent;
        
         border: none;
        
         padding: 0;
        
         }
        
         .uploadify:hover .uploadify-button {
        
         background-color: transparent;
        
         }
        
         </
         style
         >
        
         </
         head
         >
        
         <
         body
         >
        
         <
         input 
          type
         =
         "file" 
          name
         =
         "file_upload" 
          id
         =
         "file_upload" 
          />
        
         </
         body
         >
        
         </
         html
         >