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. java 数据绑定的几种方式及相关注意事项-持续更新

    spring mvc 中会遇到各种数据绑定,有些不常用的,但是千万不要觉得不可以,没有什么是不可以的,只要能够想到,就可以. 数据绑定方式: 1. 注意: 当数据为包装类型的数字型时,如果Long h ...

  2. 在 ASP.NET 中执行 URL 重写的方法

    由于需要我们经常会想将动态的页面做成伪静态的,或者在get传值的时候使其简洁明了(实现“可删节”的URL),这时我们需要用到URL重写,微软的MSDN上有详细的原理和使用介绍.我这里就将一种简单的使用 ...

  3. C#-WinForm-打印控件

    打印控件 绘制如下窗体 一.PrintDocument -打印的基础  首先放置PrintDocument控件,双击事件PrintPage设置要打印的样式(李献策lxc) //第一步 设置打印属性 p ...

  4. js学习笔记7----return，arguments及获取元素样式

    1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...

  5. perl array, scalar and hash

    #!/usr/bin/perl use strict; use warnings; my @aa=("aa", "bb", "cc"); p ...

  6. Hadoop的RPC分析

    一.基础知识 原理 http://www.cnblogs.com/edisonchou/p/4285817.html,这个谢了一些rpc与hadoop的例子. 用到了java的动态代理,服务端实现一个 ...

  7. sbin/hadoop-daemon.sh: line 165: /tmp/hadoop-hxsyl-journalnode.pid: Permission denied

    原来在logs下 该权限,还是不行,以root登陆可以了,但是其他节点是普通用户啊,还会出其他问题,仔细看是/tmp,就是linux根目录下的tmp,改他的权限吧,不知道重启会不会变化.

  8. 【poj1419】 Graph Coloring

    http://poj.org/problem?id=1419 (题目链接) 题意 求一般图最大独立集. Solution 最大独立集=补图的最大团. 代码 // poj1419 #include< ...

  9. 使用Jayrock开源组件开发基于JSON-RPC协议的接口

    最近接手一个以前的项目,无意间发现此项目开发接口的组件:Jayrock(接口组件估计用的少,用的最多的估计是这个Jayrock.json.dll,用于解析json) 以下是Jayrock的介绍官网: ...

  10. struts2 CVE-2013-2251 S2-016 action、redirect code injection remote command execution

    catalog . Description . Effected Scope . Exploit Analysis . Principle Of Vulnerability . Patch Fix 1 ...