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

1、准备

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

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

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

2、开始配置

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

< 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文件上传控件。

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

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

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

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

demo下载