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标签

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

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