此文学习至：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: #;
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也不会失效