zoukankan      html  css  js  c++  java
  • HTML通过button触发inputfile控件上传文件的问题

    出于安全方面的考虑,通过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);30px;" id="t_file" onchange="f_file.value=this.value" hidefocus>
       <!-- opacity是透明度  这里写20是为了方便浏览,使用时应设置为0 -->
       <input type="submit" value="提交">
      </form>
     </body>
    </html>

  • 相关阅读:
    nginx article
    学习历程
    GRPC
    学习记录
    JAVA知识点记录
    flag
    读的文章
    This usually happens because your environment has changed since running `npm install`.
    expandedRowKeys、expandedRowsChange、expand
    服务端高并发分布式架构演进之路
  • 原文地址:https://www.cnblogs.com/yanghaihao/p/2836724.html
Copyright © 2011-2022 走看看