当前位置: 代码迷 >> Web前端 >> 用jquery的click或许trigger("click")模拟文件域点击不好使
  详细解决方案

用jquery的click或许trigger("click")模拟文件域点击不好使

热度:951   发布时间:2012-10-20 14:12:47.0
用jquery的click或者trigger("click")模拟文件域点击不好使。

原帖http://bbs.blueidea.com/viewthread.php?tid=1227402

?

?

<input type="file" style="border:1px solid blue;color:red;background:green;font:bold 12px '隶书';height:18px;width:160px">

?

?

可以看到,上传框带有两个控件:一个文本框和一个按钮。定义的样式对文本框全部生效,对于按钮,只有边框样式、字体大小和外观尺寸生效。看来直接用CSS定义它的外观是行不通的。

我们知道,大部分控件都有一个单击(click)事件句柄,上传框在单击"浏览..."按钮时会弹出"选择文件"对话框,如果我们自己模拟一个上传框:一个文本框(<input type="text">)和一个按钮(<input type="button">或<button>Text</button>),在单击自定义按钮时同时触发上传框的click事件让它弹出"选择文件"对话框... ...于是有:

?

<style>
.file{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
</style>
<input type="text" class="file" id="f_file"><input type="button" value="上传文件" class="file" onClick="t_file.click()">
<input name="upload" type="file" id="t_file" onchange="f_file.value=this.value" style="display:none">

?

?

在点击"上传文件"按钮时执行t_file.click(),当上传框的值有所改变时通过onchange事件句柄执行f_file.value=this.value,即保持真正的上传框与模拟的上传框的值同步更新,style="display:none"让真正的上传框隐藏,使模拟的文件上传框能以假乱真------问题似乎解决了,不过,把代码放到表单中测试一下看看:

?

?

?

<style>
.file{border:1px solid #333333;color:#666666;background:#eeeeee;font:normal 12px Tahoma;height:18px}
</style>
<form method="post" action="" enctype="multipart/form-data"><input type="text" class="file" id="f_file"><input type="button" value="上传文件" class="file" onClick="t_file.click()">
<input name="upload" type="file" id="t_file" onchange="f_file.value=this.value">
<input type="submit">
</form>

?

?

点击"上传文件"按钮后再提交表单,可以看到,真正的上传框的内容被清空了,意思就是说,这样模拟出来的上传框没有任何意义,因为没办法上传文件(记得上期《电脑》报上有关于这个的文章,我想作者肯定没放到表单中测试过)。
之所以是这个结果,估计是因为微软出于安全方面的考虑,只有当鼠标真正单击在上传控件的按钮上浏览到的文件才可以上传(否则,只要你进入我的页面,我就可以随心所欲的得到你的私密文件)。看来此路又是不通,不过不要丧气,运行一下下面的代码看看:

?

<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">&nbsp;<input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=0);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
<br><input type="submit" value="提交">
</form>
?

?

直接看代码一时可能还明白不过来,可以把上传框的透明度增加到百分之三十再看看效果(或者看这里的讨论:http://bbs.blueidea.com/viewthread.php?tid=1118701):

?

<script>
function fclick(obj){
  with(obj){
    style.posTop=event.srcElement.offsetTop
    style.posLeft=event.x-offsetWidth/2
  }
}
</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">&nbsp;<input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
<br><input type="submit" value="提交">
</form>

?

提示:要更精确的控制透明上传框的X坐标,可把脚本部分修改一下:

?

?

<script>
function fclick(obj){
  with(obj){
    style.posTop=event.srcElement.offsetTop
    var x=event.x-offsetWidth/2
    if(x<event.srcElement.offsetLeft)x=event.srcElement.offsetLeft
    if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-offsetWidth
    style.posLeft=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">&nbsp;<input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
<input name="upload" type="file" style="position:absolute;filter:alpha(opacity=30);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
<br><input type="submit" value="提交">
</form>
?
  相关解决方案