HTML通过button触发input-file控件上传文件的问题

出于安全方面的考虑,通过JS修改input-file的value是无法正确上传文件的。

只有当鼠标真正单击在上传控件的浏览按钮所添加的文件才可以上传。

使用按钮触发input-file需要通过模拟实现。

方法是:在button上方添加浮动的file控件,使用户点击button时,实际上点击file控件的按钮。

这个方法需要浏览器支持滤镜效果。

 

<html>
 <head>
  <title>添加附件</title>
 </head>
 <body class="body">
  <script type="text/javascript">
   function fclick(obj){
    obj.style.posTop=event.srcElement.offsetTop
     var x=event.x-obj.offsetWidth/2
     if(x<event.srcElement.offsetLeft)x=event.srcElement.offsetLeft
     if(x>event.srcElement.offsetLeft+event.srcElement.offsetWidth-obj.offsetWidth)x=event.srcElement.offsetLeft+event.srcElement.offsetWidth-obj.offsetWidth
     obj.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" type='text'>
   <input type="button" onmouseover="fclick(t_file)" value="选择上传文件">
   <input name="upload" type="file" style="position:absolute;filter:alpha(opacity=20);width:30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
   <!-- opacity是透明度  这里写20是为了方便浏览,使用时应设置为0 -->
   <input type="submit" value="提交">
  </form>
 </body>
</html>

 

posted @ 2012-12-28 09:14  HermanSeed  阅读(3003)  评论(0编辑  收藏  举报