input file美化，文件上传

时间：2023-03-09 16:45:39
input file美化，文件上传

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

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

效果图：

原图：

input file美化，文件上传

美化后：

input file美化，文件上传

input file美化，文件上传

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

1.css

<style>
    .a-upload {
    padding: 4px  4px 10px 10px;
    height: 25px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #;
    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: ;
    top: ;
    opacity: ;
    filter: alpha(opacity=; background: #eee; border-color: #ccc; text-decoration: none ;  /* 什么鬼 */
} 

</style>

①border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

提示：该属性允许您为元素添加圆角边框！

②z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

③ filter：http://www.w3cplus.com/css3/ten-effects-with-css3-filter

④text-decoration:http://www.w3school.com.cn/cssref/pr_text_text-decoration.asp

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();
            );

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

        });

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

相关文章