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

最新推荐文章于 2021-06-09 10:58:52 发布

原创最新推荐文章于 2021-06-09 10:58:52 发布 · 1.4w 阅读

1 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

13 篇文章

订阅专栏

HTML

10 篇文章

订阅专栏

6 篇文章

订阅专栏

本文介绍了一种使用JavaScript和HTML模拟文件上传的方法。由于安全限制，直接通过JS改变input-file的值无法实现文件上传，因此文章提供了一个巧妙的解决方案：通过布局调整让按钮触发隐藏的文件输入框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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