zoukankan      html  css  js  c++  java
  • IE input file隐藏不能上传文件解决方法

    当大神们都在探讨更深层次的问题时,我还在这里转载发些肤浅的问题解决方案。罢了,为了和我一样笨的后来人。

    问题:

    上传文件时,用<input type="file" />标签,但是默认的file标签很难看,而且每个浏览器下都有很大差距。

    1.一般解决办法:

    我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它,比如我们创建一个a标签来替代它,隐藏file标签,单击a标签时触发file标签click弹出选择文件窗口,选择文件之后,触发file的change事件提交。

    存在问题:

    由于IE浏览器安全限制问题,没有点击file的浏览按钮选择文件都不让上传。

    2.终极解决办法:

    既然IE非得要亲自点击,我们可以变通一下,让自定义按钮存在又能真正点击到file标签。

    解决方案是让file标签盖在a标签上,但file是透明的,这样用户看到的是a标签的外观,实际点击是file标签。

    代码如下

    <a style="position:relative;" href="javascript:void(0);">
         上传文件 <input style="position:absolute;left:0;top:0;z-index:999;opacity:0;"type="file" name="file" /> </a>

    注意:

    a.取消a标签onclick事件,因为实际上已经不需要a标签的onclick触发file的click了,而是直接就点击到file;
    b.file标签不需要再设置display:none隐藏,而是通过opacity:0让它完全透明,实际它是浮在a标签之上
    c.file标签设置position:absolute后要给left:0、top:0,否则file标签不会吻合覆盖a标签导致点击按钮的时候点不到file标签 

    参考原文:http://www.qttc.net/201305334.html(感谢原文作者的分享)

     

  • 相关阅读:
    Java基础06 组合
    纸上谈兵: 树, 二叉树, 二叉搜索树
    Java基础05 实施接口
    纸上谈兵: 队列 (queue)
    纸上谈兵: 数学归纳法, 递归, 栈
    Java基础01 从HelloWorld到面向对象
    纸上谈兵: 表 (list)
    Java基础02 方法与数据成员
    纸上谈兵: 排序算法简介及其C实现
    纸上谈兵: 栈 (stack)
  • 原文地址:https://www.cnblogs.com/talentzemin/p/3902899.html
Copyright © 2011-2022 走看看