图片显示与下载

lingdududu 发布于2019-06-27 14:57 / 2030人阅读

摘要：请多时候你会发现浏览器即可显示图片文件，也可提供图片文件下载。还有一种方法直接访问图片地址

请多时候你会发现浏览器即可显示图片(文件)，也可提供图片（文件）下载。到底如何实现？什么代码控制的呢？

关键技术点

HTTP响应头属性
1、Content-Type
2、Content-Disposition (提供下载的实现)
3、Content-Length

下载

实现代码如下

    $file = "./img/fang.jpg";
    $mode = "rb";
    header("Content-Disposition:Attachment;filename=".basename($file));
    $finfo = new Finfo(FILEINFO_MIME_TYPE);
    $mime = $finfo->file($file);
    header("Content-Type: ".$mime);
    header("Content-Length:".filesize($file));
    
    $handle = fopen($file, $mode);
    while(!feof($handle)){
        echo fgets($handle, 1024);
    }

注意
在IE中，没有header("Content-Disposition:Attachment;filename=".basename($file));这句代码也可实现下载，只要header("Content-Type:image/jpg");就会提供下载

显示

实现代码如下

    $file = "./img/fang.jpg";
    $mode = "rb";
    $finfo = new Finfo(FILEINFO_MIME_TYPE);
    $mime = $finfo->file($file);
    header("Content-Type: ".$mime);
    header("Content-Length:".filesize($file));
    
    $handle = fopen($file, $mode);
    while(!feof($handle)){
        echo fgets($handle, 1024);
    }

注意
在IE中，上面代码会没有效果（依然是下载），在IE中，要显示必须header("Content-Type: text/plain");不能设为image/jpg,这种做法不止兼容IE，其他浏览器也兼容。

还有一种方法
直接访问图片地址

云服务器 GPU云服务器图片显示滚动图片图片显示 html图片不显示图片随机显示图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/22122.html

HTML与CSS中的,链接与图像个人分享

摘要：链接与图像链接元素元素表示链接元素作用从当前页面跳转到指定页面属性设置指定跳转页面的路径路径分类相对路径相对于当前页面的路径绝对路径访问的路径地址不变化示例代码相对路径的链接文本阴影案例他是链接绝对路径的链接他也链接与图像链接元素 < a >元素 - 表示链接元素作用 - 从当前html页面跳转到指定html页面属性 href - 设置指定跳转html页面的路径 ...

cocopeak 2019-08-29 16:34 评论0 收藏0
HTML与CSS中的,链接与图像个人分享

摘要：链接与图像链接元素元素表示链接元素作用从当前页面跳转到指定页面属性设置指定跳转页面的路径路径分类相对路径相对于当前页面的路径绝对路径访问的路径地址不变化示例代码相对路径的链接文本阴影案例他是链接绝对路径的链接他也链接与图像链接元素 < a >元素 - 表示链接元素作用 - 从当前html页面跳转到指定html页面属性 href - 设置指定跳转html页面的路径 ...

elisa.yang 2019-08-02 11:21 评论0 收藏0
图片加载框架之UIL

摘要：加载并显示图片或加载并执行回调接口。加载图片主要分为三类接口表示异步加载并显示图片到对应的上。以上三类接口最终都会调用到这个函数进行图片加载。不允许访问网络的图片下载器。创建图片下载器，返回一个。 1. 功能介绍 1.1 Android Universal Image Loader Android Universal Image Loader 是一个强大的、可高度定制的图片缓存，本文简...

lentrue 2019-08-16 10:50 评论0 收藏0