自定义的跨浏览器文件上传

普通版本,自己定义样式:
input为file文件上传控件 跨浏览器 显示:
//样式
<style>
/*文件上传输入框的样式*/
input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
input.upBtn{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px;width:85px;}
/*上传文件隐藏元素(file)的样式*/
.specInput{
position:absolute;
filter:alpha(opacity=100);//IE里面设置元素透明样式,0-100
opacity:1;//firefox,google里面设置元素透明样式,0.0-1.0
width:30px;
}
</style>
//js脚本
<script type="text/javascript">
function fclick(obj){
with(obj){
var theE = window.event || arguments.callee.caller.arguments[0];
var val = theE.srcElement?theE.srcElement:theE.target;
obj.style.top=val.offsetTop+"px";
var x=theE.clientX-offsetWidth/2;
if(x<val.offsetLeft){
x=val.offsetLeft;
}
if(x>val.offsetLeft+val.offsetWidth-offsetWidth){
x=val.offsetLeft+val.offsetWidth-offsetWidth;
}
obj.style.left=x+"px";
}
}
</script>
//页面
<div class="centerDiv">
<form method="post" action="" enctype="multipart/form-data">
<input id="f_file"> <input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
<input name="file" type="file" class="specInput" id="t_file" onchange="f_file.value=this.value">
<br><input type="submit" value="提交">
</form>
</div>

你可能感兴趣的:(JavaScript,java,UI,File,upload)