js修改input file文件上传样式(浏览样子)

学习笔记

这里我将写出修改input file样式及效果。
当我们使用文件上传的文本框时，默认是很丑的，都不忍心截图了，所以需要美化一下，那么美化采用的方法是：
1、隐藏原来的file控件
2、自定义样式控件
3、修改js，当点击自定义控件时，调用隐藏file控件click事件，并把结果显示出来。
我这里使用了bootstrap样式，具体可以自己调，前台代码：

    <input type="file" name="file" id="file" style="display:none">
    <div class="input-append">
       <input id="uploadurl" class="input-large" type="text" disabled>
       <a class="btn btn-info" onclick="$('input[id=file]').click();">
           <i class="icon-folder-open-alt"></i> 浏览
       </a>
    </div>

    <script type="text/javascript">
    $('input[id=file]').change(function() {
        var path = $(this).val();
        path = path.split('＼＼');
        path = path[path.length-1];
        $('#uploadurl').val(path);
    });
    </script>

参考资料