最近的项目有个需要是,在页面中有个链接,点击后在新页面打开一个图片,这本来是很容易的事情,但是问题在于公司的图片资源统一储存在一个服务器中的,而且返回的数据中设置了Content-Disposition: attachment; filename="xxx.jpg"头,服务器可能是在web服务器设置了这个头,或者是在应用服务器代码里设置的,下面利用php模拟这个过程,如果我这样写:<a href="xxx.php" target="_blank">xxx</a>,不设置Content-Disposition头的话,那可以实现打开一个图片的功能,但是如果设置了这个头,那浏览器就会下载这个图片,而服务器端的东西我是不能改的,所以这个头我是去不了的,所以我只能在前端做点手脚,下面的代码就是这hack的方法。
<!DOCTYPE html>
<html>
<body >
<a href="#" id="img" >img</a>
</body>
<script type="text/javascript">
document.getElementById("img").οnclick=function(){
str='<!DOCTYPE html><html><body ><img src="img.php" /></body></html>';
var a=window.open("")
a.document.write(str);
};
</script>
</html>
我在新打开的窗口中创建一个图片,然后把src写成相应的地址,这时候即使返回的数据设置了content-disposition头,也可以实现打开图片的功能。
php代码
<?php
$filename = "2.jpg";
header('Content-Type:image/gif');
header('Content-Disposition: attachment; filename="'.$filename.'"');
header('Content-Length:'.filesize($filename));
readfile($filename);
?>