`
Relucent
  • 浏览: 207170 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • JS
HTML浏览器JavaScriptF# 
阅读更多

出于安全方面的考虑，通过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>

 

分享到：
| 模拟线程Timer(JS)
评论
1 楼 harborgang 2009-05-04  
好像很有问题
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics