jQuery改变file文件上传控件”浏览“按钮样式

1、准备

下载jQuery核心库和jQuery File Style插件库。

jQuery 1.4下载地址       |        jQuery File Style下载地址

下载一张按钮的图片，如下图所示，你可以另存为该图。

2、开始配置

在页面上引入jQuery核心库和jQuery File Style插件库。

1 2	< script src = "jquery-1.4.1.min.js" kesrc = "jquery-1.4.1.min.js" type = "text/javascript" >script> < script src = "jquery.filestyle.js" kesrc = "jquery.filestyle.js" type = "text/javascript" >script>

在页面中放入需要改变样式的file文件上传控件。

1 2 3

< form action = "#" class = "FileForm" >     < h1 >改变样式后的file文件选择框h1>      < input class = "file_1" type = "file" > form>

初始化脚本，开始改变控件的样式。

1 2 3 4 5 6 7 8

$( function () {        $( "input.file_1" ).filestyle({             image: "choose-file.gif" ,            imageheight : 22,            imagewidth : 82,            width : 220        });  });

这样，我们就改变了文件上传控件按钮的样式，效果如下图所示：

demo下载