input file美化，文件上传

此文学习至：http://www.haorooms.com/post/input_file_leixing

然而只会用，不会做，UI泪茫茫

效果图：

原图：

美化后：

此主要用css美化表单，然后用Jq提交表单

1.css

<style>
    .a-upload {
    padding: 4px  4px 10px 10px;
    height: 25px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;    /* 什么鬼 */
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1 /* 什么鬼 */
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);/* 什么鬼 */     cursor: pointer } .a-upload:hover { color: #444; background: #eee; border-color: #ccc; text-decoration: none ;  /* 什么鬼 */

} 

</style>

2.html

        <div class="row upFile">
            <form id="form1" enctype="multipart/form-data"  target="_blank" method="post" action="~/comm/inexcel.ashx?action=test">
                <a href="javascript:;" class="a-upload btn-warning">
                    <input type="file" name="file" id="file" />点击上传文件
                </a>
                <label class="showFileName"></label>
            </form>
        </div>

3.Jq操作

        $(".a-upload").on("change", "input[type=‘file‘]", function () {
            var filePath = $(this).val();
            var extend = filePath.substr(filePath.indexOf(".") + 1);

            if (extend == "xls") {
                $("#form1").submit();//提交会保持原form中的参数
            }
            $(".showFileName").html("文件上传错误，只支持.xls（2003）");

        });

/ on的绑定事件比较重要，绑定后即使页面刷新，js也不会失效