如何把上传文件的浏览按钮换成 或者图片

<inpu type="file">
这个出来以后是一个自带的一个浏览按钮，
我想把自带的换成一张图片来代替.

解决方案 »

  1.   

    不明白，是用css吗？可不可以把代码写一下
      

  2.   

    搜Input form plugin，jquery的
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
        <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>input type=form Test Page</title> <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.inputform.js"></script> <link rel="stylesheet" href="css/css.css" type="text/css">
    <script type="text/javascript"> $().ready(function(){
    $("input.select1").inputfile();
    $("input.select2").inputfile({button:"<img src='img/select.gif'>"});
    });

    </script>
    </head>
    <body> <fieldset class="form_fieldset">
    <legend>Input type styling</legend>
    <table class="form_table">
    <tr>
    <td class="caption">Upload File:</td>
    <td class="input"><input type="file" name="sfile" class="select1"/></td>
    </tr>
    <tr>
    <td class="caption">Main Image:</td>
    <td class="input"><input type="file" name="name" class="select2"/></td>
    </tr>


    </table>
    </fieldset> </body>
    </html>jquery.inputform.js(function($) {$.fn.inputfile=function(options){ var settings = {
    button:"<button>Select file</botton>"
    }; $.extend(settings, options);
    this.each(function(){  var block_div=$("<div></div>").css({position: "relative"});
    var fake_div=$("<div></div>").addClass("fakefile");
    var button=$(settings.button);
    $(this).addClass("file"); $(this).wrap(block_div).after(fake_div.append(button));

    });


    }})(jQuery);css.css.form_table{width:100%}
    .form_table td.caption{text-align:right;vertical-align:top;white-space:nowrap;}
    .form_fieldset{ border:1px solid #B5B8C8; width:30%}button{background:#FFFFFF url(../img/button-bottom.gif) repeat-x bottom; border:1px solid #B5B8C8; padding:1px 3px;}
    div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1;}
    input.file { left: -140px;position: relative; -moz-opacity:0 ; filter:alpha(opacity:0); opacity: 0; z-index: 2;}
      

  3.   

    把 <inpu type="file"> 设置成透明的(ff用opacity:0; IE用filter: Alpha(opacity=0);)
    然后position:absolute定位到你的自定义图片的位置