您的位置：首页 > 其它

研究了一下关于图片预览的方法

2013-09-20 13:50 232 查看

首先文中引用了好多前辈的blog，原谅我没有节操的复制粘贴，菜鸟进阶第一步，膜拜前人^ ^~~~

图片预览是指在表单中提交无刷新的情况下，将想上传的图片显示出来，很常用的一个功能。

大概查阅了一下资料，现在比较常用的办法如下：

ie6：<input type=file/>中可以直接获取到value即为本地图片地址，可以直接引用在页面中，但是其他浏览器和ie高版本将这个视为危险操作，不允许。

ie7/8: 通过滤镜可以解决，关于滤镜 http://blog.csdn.net/lsd123/article/details/3638329

具体实现方法参见 http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html

这里面提到了替换img默认小图标的方法：Data-uri和mhtml 参见小马哥的blog：http://dancewithnet.com/2009/08/15/data-uri-mhtml/

ff3 ：提供了nsIDOMFile接口，能更好地获取文件数据。

在ff的file控件有一个FileList对象，包含了带nsIDOMFile接口的File对象。ps：FileList对象貌似是一个NodeList集合，但目前只能用第一个，可能是为了将来实现一个file控件选择多个文件的功能预留的。

这个File对象有三个获取文件数据的方法：getAsText：获取文件的文本数据，可以通过参数设置编码；
getAsDataURL：获取文件的Data URI(URL?)数据；getAsBinary：获取文件的二进制数据。
其中getAsDataURL获得的Data URI数据可以用于显示图片，_domfileData中就是用它来获取数据的。

File对象还支持两个属性：fileName（文件名，不包括路径）和fileSize（文件大小）。相关具体说明参考mozilla的File和nsIDOMFile。

其他浏览器如chrome等，由于安全限制，还是没办法实现普通方法的预览，不过html5有一个filereader属性，详见：http://www.jsmix.com/blog/html5/file-reader.html

最后，终极办法，从后台获取两个思路，异步提交表单或者ajax。ajax太笨重了，这里说说异步方法。

1 创建一个width=0，height=0的iframe在页面中，src指向一个同域的地址。

2 form表单提交的时候会有一个target属性，将它指向iframe的id。

这样处理form的后台页只会在iframe里面打开，不会引起跳页，然后iframe里面可以在收到图片地址之后，通过操作parent，来控制图片地址。

看我简单写的代码：前台：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
</head>
<body>
<iframe src="http://localhost" id="if" width="0" height="0" style="border:0" ></iframe>
<form id="testForm" action="http://localhost/1.php" target="if" method="post" enctype="multipart/form-data">
<input name="file" type="file"/>
<img/>
<input type="submit"/>
</form>
<script>

</script>
</body>
</html>

1.php如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
</head>
<body>
<p>
<?php
if ($_FILES["file"]["error"] > 0)
{
echo "Error: " . $_FILES["file"]["error"] . "<br />";
}
else
{
if (file_exists("upload/" . $_FILES["file"]["name"]))
{
echo $_FILES["file"]["name"] . " already exists. ";
}
else
{
if(!file_exists("upload")){
mkdir("upload");
}
$uploadPath = "upload/". $_FILES["file"]["name"];
move_uploaded_file($_FILES["file"]["tmp_name"],
iconv("utf-8", "gb2312", $uploadPath)) ;
echo $uploadPath;
}
}

?>
</p>
<script>
parent.document.images[0].src = document.getElementsByTagName("p")[0].innerHTML;
</script>
</body>
</html>

当然只是简单的实现代码，错误验证啊什么都没有，只是说明个功能。

注意其中的

move_uploaded_file($_FILES["file"]["tmp_name"],
iconv("utf-8", "gb2312", $uploadPath)) ;

iconv就是上篇文章提到的用来处理上传中文文件乱码的函数。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航