1.不用HTML中的img标签来下载图片，通过XHR  api来下载图片：

 var xhr = new XMLHttpRequest();

         xhr.open('GET','/img/tooth-intro.jpg');

         xhr.responseType = 'blob';   //二进制文件

         xhr.onload = function(){

             if(this.status === 200){

                 var img = document.createElement('img');

                 img.src = window.URL.createObjectURL(this.response);

                 img.onload = function(){

                     //图片加载完，释放一个URL资源。

                     window.URL.revokeObjectURL(this.src);

                 }

                 document.body.appendChild(img);

             }

         }

         xhr.send();

HXR满足不了流式数据的传输，但是还是有其他的办法，而且还是专门为流式数据处理和设计的，如： Server-Sent Events、和WebSocket。

2.Server-Sent Events

Server-Sent Events提供方便的流API，用于从服务器向客户端发送文本数据，判断浏览器是否支持SSE：

typeof(EventSource)!=="undefined" // true 支持；false 不支持。

客户端：

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Basic SSE Example</title>

  </head>

  <body>

    <pre id="x">Initializing...</pre>

    <script>

    var es = new EventSource("sse");

    es.addEventListener("message", function(e){

      document.getElementById("x").innerHTML += "\n" + e.data;

      },false);

    </script>

  </body>

</html>

服务器：

var http = require("http"),

    fs = require("fs");

var port = 1234;

http.createServer(function(request, response){

  console.log("Client connected:" + request.url);

  if(request.url!="/sse"){

    fs.readFile("web/basic_sse.html", function(err,file){

      response.writeHead(200, { 'Content-Type': 'text/html' });

      var s = file.toString();  //file is a buffer

      response.end(s);

      });

    return;

    }

  //Below is to handle SSE request. It never returns.

  response.writeHead(200, { "Content-Type": "text/event-stream" });

  var timer = setInterval(function(){

    var content = "data:" + new Date().toISOString() + "\n\n";

    var b = response.write(content);

    if(!b)console.log("Data got queued in memory (content=" + content + ")");

    else console.log("Flushed! (content=" + content + ")");

    },1000);

  request.connection.on("close", function(){

    response.end();

    clearInterval(timer);

    console.log("Client closed connection. Aborting.");

    });

  }).listen(port);

console.log("Server running at http://localhost:" + port);

而WebSocket则提供了高效、双向的流机制，而且同时支持二进制和文件数据。

通过XHR  API来下载和上传图片的更多相关文章

  1. JAVA API的下载和中文查看API

    一.JAVA API的下载 1.1 JAVA由SUN公司开发,2006年SUN公司宣布将Java技术作为免费软件对外发布,标志着JAVA的公开免费.2009年,SUN公司被甲骨文公司收购,因此我们现在 ...

  2. JDK API从下载到使用

    经常有人问我一些java常用类的使用方法,还有一些问某个常用类是干啥的.这些问题都是不会查询jdk api,对常用类的方法不熟悉等情况.于是,经过再三思考决定编写jdk api查询使用手册. ☆准备工 ...

  3. Android官方api的下载

    不少开发者,都需要api来进行参考,可是目前Android开发来说默认是没有下载的, 而且sdk中有时候部分开发者也很疑惑怎么没有找到像document或者doc之类的文档进行下载,其实我们只要在把s ...

  4. 【python】调用sm.ms图床api接口，实现上传图片并返回url

    图床简介 sm.ms网站提供免费的图床服务.单图上传大小限制5MB,每次最多上传10张,支持多种图片链接格式和api接口调用. 获取令牌 注册账号并登录,点击User-Dashboard 点击API ...

  5. 转：python webdriver API 之下载文件

    webdriver 允许我们设置默认的文件下载路径.也就是说文件会自动下载并且存在设置的那个目录中.要想下载文件,首选要先确定你所要下载的文件的类型.要识别自动文件的下载类型可以使用 curl ,如图 ...

  6. 利用斗图啦网站API批量下载表情图片

    decorator.py #!/usr/bin/env python # -*- coding: utf-8 -*- import logging import os from functools i ...

  7. API工具下载地址记录一下

    java 1.6 帮助文档中文链接:http://download.csdn.net/detail/qw599186875/9608735 中文 – 谷歌版在线版: https://blog.fond ...

  8. 通过Canvas及File API缩放并上传图片

    原文地址:Resize an Image Using Canvas, Drag and Drop and the File API 示例地址:Canvas Resize Demo 原文作者:Dr. T ...

  9. API例子：用Java/JavaScript下载内容提取器

    1,引言 本文讲解怎样用Java和JavaScript使用 GooSeeker API 接口下载内容提取器,这是一个示例程序.什么是内容提取器?为什么用这种方式?源自Python即时网络爬虫开源项目: ...

随机推荐

  1. Ubuntu下tftp服务器的搭建

    参考博客:http://blog.chinaunix.net/uid-26495963-id-3206829.html 1. 安装 $ apt-get install tftp-hpa tftpd-h ...

  2. 一步一步教你elasticsearch在windows下的安装

    首先下载最新的elasticsearch安装版本:elasticsearch下载.下载最新的elasticsearch 0.90.1版本.下载完成后.解压缩在安装目录.在cmd命令行进入安装目录,再进 ...

  3. iOS开发小技巧--iOS8之后的cell自动计算高度

    cell高度自动计算步骤:

  4. Js-字符串截取substring，分割split，指标indexOf，拼接John

    函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组例子: var theString=”jpg|bmp|gif|ico|png”; var arr=theString.spli ...

  5. git初体验（四）git标签

    1.git 标题(tag) 关于git标签的描述,参考这里 2.标题管理 创建: 切换到需要打标签的分支上,如: git checkout master git tag v1.0 # 默认标签是打在最 ...

  6. 绑定: TemplateBinding 绑定, 与 RelativeSource 绑定, 与 StaticResource 绑定

    介绍背水一战 Windows 10 之 绑定 TemplateBinding 绑定 与 RelativeSource 绑定 与 StaticResource 绑定 示例1.演示 TemplateBin ...

  7. Win7下完全卸载Oracle 11g的步骤

    1 右击“计算机”-->管理-->服务和应用程序-->服务,停掉所有Oracle相关的服务(以Oracle打头的,比如OracleDBConsoleorcl). 2 开始--> ...

  8. 【BZOJ-1507】Editor 块状链表

    1507: [NOI2003]Editor Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 3397  Solved: 1360[Submit][Stat ...

  9. springMVC-自定义数据类型转换器

    自定义类型转换器 201603005,今天想了一个问题,Spring中的Conventer是如何实现的,因为他没有绑定类中的属性,它怎么知道要将那个String转换?看了几遍的书也没有找到,后来想想, ...

  10. oracle 锁的介绍 (转)

    本文转自:http://blog.csdn.net/gyb2013/article/details/6929697 一.什么是锁: Oracle的锁机制是一种轻量级的锁定机制,不是通过构建锁列表来进行 ...