IE input file隐藏不能上传文件解决方法

HTML/CSS 2013-05-30 上传,IE,input,file

又是IE的一个问题,近来是跟IE浏览器磕上了,这个问题发现不少人也遇到过,实在蛋疼。但今天这个不能算是一个bug,因为IE可能是从安全角度上考虑结果导致的。一步步来解读。

普通上传例子

首先普通的文件上传呢,很简单,前端代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>file标签隐藏</title>

	</head>
	<body>
		<form action="http://192.168.1.99/upload/upload.php" method="post" enctype="multipart/form-data">
			<input onchange="document.forms[0].submit();" type="file" name="file" />
		</form>
	</body>
</html>

upload.php代码:

echo '<pre>';
print_r($_FILES["file"]);
echo '</pre>';

其实就是打印获取到的文件信息。我们测试一下,选择文件后,提交到PHP页面结果如下:

Array
(
    [name] => 7.jpg
    [type] => image/jpeg
    [tmp_name] => /tmp/php0VkjPG
    [error] => 0
    [size] => 36297
)

能正确获取文件信息,只需要cp下就能保存。

用别的按钮替代file标签

但是默file标签很难看,而且每个浏览器下都有很大差距。因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它,比如我们创建一个a标签来替代它,隐藏file标签,单击a标签时触发file标签click弹出选择文件窗口。最终页面代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>file标签隐藏</title>

	</head>
	<body>
		<form action="http://192.168.1.99/upload/upload.php" method="post" enctype="multipart/form-data" style="display:none;">
			<input onchange="document.forms[0].submit();" type="file" name="file"  />
		</form>

		<a onclick="document.forms[0].file.click();" href="javascript:void(0);" >上传文件</a>
	</body>
</html>

页面上就只看见a标签

点击“上传文件”弹开选择文件的窗口

选择文件后,正确传送文件信息到服务器

这样就完成文件上传了,这个操作在Chrome,FireFox下都正常,IE下有问题。

IE不能上传文件

IE下也能正常弹开选择文件的窗口

但选择文件后,却不能上传,同时还报一个“拒绝访问”错误,如截图中红圈部分

解决IE下不能上传文件的问题

其实这是IE安全限制问题,没有点击file的浏览按钮选择文件都不让上传,既然IE非得要亲自点击,我们可以变通一下,让自定义按钮存在又能真正点击到file标签。解决方案是让file标签盖在a标签上,但file是透明的,这样用户看到的是a标签的外观,实际点击是file标签。如图:

最终页面代码如下:

<a style="position:relative;display:block;width:100px;height:30px;background:#EEE;border:1px solid #999;text-align:center;"  href="javascript:void(0);" >上传文件
	<form action="http://192.168.1.99/upload/upload.php" method="post" enctype="multipart/form-data">
		<input style="position:absolute;left:0;top:0;width:100%;height:100%;z-index:999;opacity:0;" onchange="document.forms[0].submit();" type="file" name="file"  />
	</form>
</a>

页面:

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

我们再来测试一下:

点击按钮:

选择文件:

上传成功!

文字链接:《IE input file隐藏不能上传文件解决方法

文章地址:http://www.qttc.net/201305334.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 11

  • </div><script>alert("dsfasdfa")</script><div>
    2017-07-03 15:31:39 [ 跟帖 ]
    1 #
  • <script>alert("dsfasdfa")</script>
    2017-07-03 15:29:32 [ 跟帖 ]
    2 #
  • 上次见到一个人是这样做的! 在你在点的button上添加js事件:onmouseover.让file的按扭在button上。点击的时候就是直接点file。 地址:http://bbs.csdn.net/topics/320156312
    2015-09-11 15:37:31 [ 跟帖 ]
    3 #
  • IE 的 控件 是由一个文本框、一个按钮 组成的,不像 Chrome 等是一个标签套在一个按钮外面。所以 IE 的单击可能落在其文本框内而只显示一个输入光标,只有点在其按钮的位置才会打开“打开文件”对话框(双击文本框也可以)。因此,博主的 IE 补丁还不是很完美~(以上亲测于 Win 8.1 + IE 11 最新版的 IE 8 模式)
    2015-02-11 13:50:46 [ 跟帖 ]
    4 #
  • 没有更好的解决方法了吗?一个问题弄了5天了,本以为解决了,可是问题就是这样的,在IE上点其他的调onclick事件没用,非得点到fileupload才可以。
    2014-08-01 15:38:50 [ 跟帖 ]
    这是原始IE下form表单提交的解决方案,你可以用flash上传组件去解决这些原始表单的问题,而且非常好用。
    2014-08-10 10:41:01 [ 跟帖 ]
    fileupload有个属性设置一下就可以了,font-size,按钮的大小就可以变化了。可以做成看上去只是一个按钮,其实是按钮部分全部显示在iframe中。
    2014-08-12 10:01:30 [ 跟帖 ]
    5 #
  • 谢谢楼主分享,再次谢谢,你帮我大忙了!!!!好人!!我爱你~~~~
    2014-03-24 15:54:14 [ 跟帖 ]
    6 #
  • 楼主好人
    2013-08-20 09:52:56 [ 跟帖 ]
    7 #
  • 十分感谢,这个解决方法帮我大问题了!
    2013-07-24 14:02:53 [ 跟帖 ]
    8 #
  • 谢谢你的方法,问题结局了。
    2013-07-05 15:30:50 [ 跟帖 ]
    9 #