今天在使用 tinypng.com 这个在线压缩图片的网站时,对其处理完图片后,可以无刷新下载图片感到好奇,于是了解了一下相关实现。无刷新下载可以利用MIME type或者设置Content-disposition来实现。

无刷新下载文件

无刷新下载 rar 之类的文件很好实现:

  • 通过 meta 标签: <meta http-equiv="refresh" content="url=http://down.load/file.rar">
  • 通过 Javascript 重定向: window.location.assign("http://down.load/file.rar")
  • 通过 Javascript 构建隐藏的 iframe 并设置 src $(body).append('<iframe style="display:none;" src="http://down.load/file.rar"')

以上的实现均可以在当前页面无刷新进行,效果如 sourceforge、github 上的源码下载。

无刷新下载图片

上述无刷新下载主要是因为 rar 这类文件,服务器上设定的 MIME type 会告知浏览器访问时采用下载的方式。但如果要实现无刷新下载图片,就不能简单的使用上述方法了,因为浏览器会依据图片的 MIME,选择显示照片而不是下载图片。

对 tinypng.com 下载图片的链接信息进行查看,发现了与普通图片地址的 Header 信息不同之处:Content-disposition。

Header中多了一个Content-disposition

Content-disposition

Content-disposition 是 MIME 协议的扩展,MIME 协议指示 MIME 用户代理如何显示附加的文件。当浏览器接收到头时,它会激活文件下载对话框,它的文件名框自动填充了头中指定的文件名。

使用方式如: Content-Disposition: attachment; filename="fname.ext"fname.txt 是定义保存的名称,可随意指定。通过设置 HTTP header 中的Content-disposition ,就可以为图片临时定义新的 MIME,实现访问时提示保存。简单的 PHP 实现如下:

  1. header('Content-Disposition: attachment; filename=girl.png');
  2. // 禁止浏览器缓存,否则IE下可能会失效
  3. header("Pragma: No-cache");
  4. header("Cache-Control: No-cache");
  5. header("Expires: 0");
  6. // 简单的返回文件
  7. echo file_get_contents('http://localhost/girl.png');
php

tinypng 的图片下载地址为 https://tinypng.com/web/output/m1rd5u43so88e1b5.png/girl.png,其中 output 是程序地址,m1rd5u43so88e1b5.png 是服务器上保存的文件,而 girl.png 则是用户保存时使用的文件名。

设置好 Content-disposition ,再利用前面提到的无刷新下载文件就可以实现图片的无刷新下载了,要实现 .txt,.css 文件下载也是如此。不过单纯通过 Javascript 无法定义 Content-disposition。

利用Content-disposition实现无刷新下载图片文件的更多相关文章

  1. 实现ASP.NET无刷新下载并提示下载完成

    先上代码,后面再进行说明. 以下是前端代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehi ...

  2. nodejs利用ajax实现网页无刷新上传图片

    nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...

  3. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  4. 利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码

    利用php CI force_download($filename, $data) 下载.csv 文件解决文件名乱码,文件内容乱码 2014-07-31 12:53 1047人阅读 评论(0) 收藏  ...

  5. python+ajaxFileUpload 无刷新上传文件

    需要准备文件 http://pan.baidu.com/s/1bp4N3nL   qqi0 html <script src="{% static 'js/jquery.js' %}& ...

  6. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  7. Ajax 无刷新上传文件插件 uploadify 的使用

    在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify ...

  8. ajax +jsp+iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  9. web 开发之js---巧用iframe实现jsp无刷新上传文件

    首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...

随机推荐

  1. HDU 5242 树链剖分思想的贪心

    题意及博客 树链剖分分为2步,第一次求出深度,重儿子,第二次求出重链,用到了启发式的思想,即对于比较重的儿子,尽量去完整的维护它.类似于我们去合并两个堆,明显把小的堆逐个插入大的堆中会比大的往小的插更 ...

  2. C++面向对象类的实例题目六

    问题描述: 编写一个程序计算两个给定长方形的面积,其中在设计类成员函数addarea()(用于计算两个长方形的总面积)时使用对象作为参数. 程序代码: #include<iostream> ...

  3. 使用php输出时间格式

    <? date_default_timezone_set("ETC/GMT-8"); $tm=time(); echo date("Y-m-d h:i a" ...

  4. DB2--sql计算时间差和格式化时间

    格式化时间 db2 格式化时间使用的 TO_CHAR(TIMESTAMP('2017-10-24 21:18:12'),'YYYY-MM-DD'): 测试sql:SELECT TO_CHAR(TIME ...

  5. linux sdcv命令

    一.简介 sdcv全称为stardict console version,是终端下的词典.   二.安装 1)安装sdcv yum install -y sdcv 2)安装字典 http://www. ...

  6. Android 菜单之子菜单SubMenu

    子菜单就是在点击了菜单中的选项后弹出的要对菜单中选项操作的菜单           他的操作与之前的两种类型的菜单操作差不多 动态添加 @Override public boolean onCreat ...

  7. Edison UVALive3488

    传送门 题目大意 有一个0~n-1的序列,有m次操作,操作包含三个元素:pl,len,ti,表示这个操作进行ti次,每次将从pl+1开始的len个元素移到序列头部.分析 看到题不难想到使用平衡树将需移 ...

  8. Linux之tcpdump使用详解

    1.1  三种关键字 关于类型的关键字 第一种是关于类型的关键字,主要包括host,net,port, 例如 host 210.27.48.2,指明 210.27.48.2是一台主机,net 202. ...

  9. 数据结构_wow(泡泡的饭碗)

    问题描述 饱了吗终于发现泡泡破解了它的代码并借此白吃白喝.饱了吗当即改变了自己的幸运儿生成源码,但是,又被机智的泡泡偷瞄到了,机智的泡泡马上意识到可能要饭碗不保了:每当有人参与抽奖,这个人就进入队列. ...

  10. nstallShield制作打包程序详解(图)

    InstallShield产品,是安装工具领域事实上的标准.InstallShield 软件是软件安装.配置软件包和升级解决方案领域内公认的标准.InstallShield已经成为安全安装软件的标准解 ...