<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="/lib/jquery/jquery-1.11.3.js" type="text/javascript"></script>
<script src="/lib/jquery/ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
function UpFile() {
var EmpID = "16650";
var Index = $("#hiIndex").val();
var filepath = $("#MyFile").val();
var random = Math.random();
$.ajaxFileUpload({
url: "/HR/mr/ashx/empinf.ashx?command=UpFile&EmpID=" + EmpID + "&Index=" + Index,
secureuri: false,
dataType: "txt",
fileElementId: "MyFile",
success: function (data, status) {
if (data.toString() == "Err001") {
alert("系统超时或未登陆,请重新登陆!");
}
else if (data.toString() == "") {
alert("系统错误!");
}
else {
var data1 = eval('(' + data + ')');
if (data1.isErr == 0) {
return;
}
else {
alert(data1.errMsg);
}
}
},
error: function (data, status, e) {
alert(e.message);
}
});
}
</script>
<style type="text/css">
.box{
width:900px;
margin: 100px auto;
font-size: 12px;
line-height: 26px;
}
.put-box{
position: relative;
}
.set-btn{
display: inline-block;
width:160px;
height: 330px;
line-height: 330px;
text-align: center;
background:#f60;
color:#fff;
border-radius:2px;
position: relative;
overflow:hidden;
}
#filePut{
position: absolute;
width:100%;
height: 400px;
left:0;
top:0;
filter:alpha(opacity=0);
opacity:0;
background:red;
font-size: 350px;
}
</style>
</head>
<body>
<div class="box">
<p>
通过设置 input的font-size越大越好,按钮就会跟着变大了<br />
你可以把上面filter和opacity注释掉就能看到input自己真实的按钮了。<br/>
这个设计原理就是,外显按钮作为父容器包着input file,,外显按钮设置超出隐藏这个属性,<br/>
当input file 自己的按钮很大的时候,就能充满 外显按钮了。不懂得欢迎联系QQ735469140
</p>
<div class="put-box">
<span class="set-btn">
这是我显示的按钮
<input type="file" id="filePut" onchange="UpFile()"/>
</span>
</div>
</div>
</body>
</html>
input file选择文件之后自动上传(样式自定义美化)
1星 需积分: 46 201 浏览量
2017-09-01
14:17:28
上传
评论
收藏 1KB RAR 举报
CHUNZHIJIEQJQ
- 粉丝: 3
- 资源: 10