当前位置: 代码迷 >> Web前端 >> 自定义的跨浏览器资料上传
  详细解决方案

自定义的跨浏览器资料上传

热度:349   发布时间:2012-06-26 10:04:13.0
自定义的跨浏览器文件上传

普通版本,自己定义样式:
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>

  相关解决方案