微软出于安全方面的考虑，只有当鼠标真正单击在上传控件的按钮上浏览到的文件才可以上传.下面是测试成功的三种方式.
<一>
<script>
function fclick(obj){
with(obj){
style.posTop=event.srcElement.offsetTop //设置透明上传框的Y坐标跟模拟按钮的Y坐标对齐
style.posLeft=event.x-offsetWidth/2 //设置透明上传框的X坐标为鼠标在X轴上的坐标加上它的宽的一半(确保点击时能点中透明上传框的按钮控件)，这里只是提供一种思路，其实还可以更精确的控制它的X坐标范围
}
}
</script>
<style>
input{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
</style>
<form method="post" action="" enctype="multipart/form-data">
<input id="f_file"> <input type="button" οnmοuseοver="fclick(t_file)" value="选择上传文件">
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=0);width:30px;" id="t_file" οnchange="f_file.value=this.value" hidefocus>
<br><input type="submit" value="提交">
</form>
<二>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文件域美化模拟</title>
<style type="text/css">
html,body{margin:0px; padding:0px; font-size:12px;}
.typeDiv{background:url(http://www.soojs.com/upload/2007/8/3/upl.jpg) no-repeat right; width:200px; line-height:22px; margin:30px 0px 0px 0px; color:#FF0000;}
</style>
<script type="text/javascript">
function Browser()
{
var ua,s,i;
this.isIE=false;
this.isNS=false;
ua=navigator.userAgent.toLowerCase();
s="msie";
if((i=ua.indexOf(s))>=0){
this.isIE=true;
return ;
}s="netscape6/";
if((i=ua.indexOf(s))>=0){
this.isNS=true;
return ;
}s="gecko";
if((i=ua.indexOf(s))>=0){
this.isNS=true;
return ;
}
}
function t(){
var _v=document.getElementById('tfile');//修改文件域ID
var _fv=document.getElementById('valueDiv');//修改父级DIV的ID
if(!(document.getElementById('fileinput'))){
var _nd=document.createElement("input");
}
else{
var _nd=document.getElementById('fileinput');
}
_nd.style.position="absolute";
_nd.style.fontSize="12px";
_nd.style.color="#ff6600";
_nd.style.border="1px solid #ff6600";
_nd.style.height="17px";
_nd.setAttribute("id","fileinput");
_nd.readOnly=true;
var browser = new Browser();
if(browser.isNS){
_nd.style.margin="1px 0px 0px 0px";
_nd.style.width="150px";
_nd.style.top=_fv.offsetTop;
_nd.style.left=_fv.offsetLeft;
}
if(browser.isIE){
var box;
var doc = document;
box = _fv.getBoundingClientRect();
var scrollTop = Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);
var scrollLeft = Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);
_nd.style.margin="-1px 0px 0px 0px";
_nd.style.width="150px";
_nd.style.top=box.top + scrollTop;
_nd.style.left=box.left + scrollLeft;
}
_v.parentNode.insertBefore(_nd,_v);
_nd.value=_v.value;
}
if (window.addEventListener)
window.addEventListener("load", t, false);
else if (window.attachEvent)
window.attachEvent("onload",t);
else
alert("请使用Ie浏览器5.5以上或者Firefox浏览器");
</script>
</head>
<body>
<div style="margin:0 auto; width:780px;border:1px solid #ccc; padding:10px 0px 10px 30px ;">
<div class="typeDiv" id="valueDiv"><input type="file" οnchange="t()" id="tfile" name="file" style="filter:Alpha(opacity=00);opacity:0.0;width:100%;" /></div>
</div>
</body>
</html>
<三>
function fclick(obj){
with(obj){
style.position="absolute";
var _fv=document.getElementById('valueDiv');
var box;
box = _fv.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
style.margin="-1px 0px 0px 0px";
style.width="0px";
style.top=box.top + scrollTop;
style.left=box.left + scrollLeft;
}
<TD nowrap="nowrap" class="table-list">
<!--
<html:file property="goodsImage" style="display: none;width: 365px;font-size:12px;height:19;background:#FFFFFF;"></html:file>
<input type="text" name="txtFakeText" readonly style="width: 300px;">
<input type="button" οnclick="HandleButton();" style="width: 80px;" value="<bean:message bundle='comn' key='label.upload'/>">
-->
<html:file property="goodsImage" style="position:absolute;filter:alpha(opacity=0);width:30px;" styleId="inputFile" οnchange="txtFakeText.value=this.value"></html:file>
<input type="text" name="txtFakeText" readonly style="width: 300px;">
<input type="button" id="valueDiv" οnmοuseοver="fclick(inputFile)" style="width: 80px;" value="<bean:message bundle='comn' key='label.upload'/>">
</TD>
5479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
