博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML通过button触发input-file控件上传文件的问题
阅读量:6675 次
发布时间:2019-06-25

本文共 1214 字,大约阅读时间需要 4 分钟。

出于安全方面的考虑,通过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" οnmοuseοver="fclick(t_file)" value="选择上传文件">
   <input name="upload" type="file" style="position:absolute;filter:alpha(opacity=20);width:30px;" id="t_file" οnchange="f_file.value=this.value" hidefocus>
   <!-- opacity是透明度  这里写20是为了方便浏览,使用时应设置为0 -->
   <input type="submit" value="提交">
  </form>
 </body>
</html>

 

转载于:https://www.cnblogs.com/yanghaihao/archive/2012/12/28/2836724.html

你可能感兴趣的文章
outlook设置gmail邮箱报错:Outlook 无法连接到接收(POP3)电子邮件服务器
查看>>
linux中文件的常用操作
查看>>
php rabbitmq操作类及生产者和消费者实例代码
查看>>
C# 面向对象三大特征 的简单描述
查看>>
Tomcat服务器集群与负载均衡实现
查看>>
我的友情链接
查看>>
crontab使用进程锁flock解决冲突
查看>>
MySQL 5.6 for Windows 解压缩版配置安装
查看>>
linux使用ntfs-3g 挂载NTFS分区
查看>>
森林、域树、域之间的关系? AD与站点之间的关系?
查看>>
shell脚本中执行时提示“没有那个文件或目录”的解决办法
查看>>
手机/移动前端开发需要注意的20个要点
查看>>
[css]vw
查看>>
性能下降曲线
查看>>
求一个数的二进制中1的个数
查看>>
古代教育观点纵览
查看>>
Linux 下搭建PHP环境(make方法)太麻烦了
查看>>
《三》kubectl命令行管理工具、YAML配置详解
查看>>
iozone测试文件系统性能
查看>>
Hadoop - HDFS的数据流剖析
查看>>