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. ELK 的好文章连接

    http://www.wklken.me/posts/2016/05/24/elk-mysql-slolog.html   处理mysql慢查询日志 http://www.wklken.me/post ...

  2. [转]java.lang.OutOfMemoryError: PermGen space及其解决方法

    原文地址:http://peak.iteye.com/blog/52606 这个问题是我的工程中加入了Birt报表在Linux环境下运行出现的问题,从网上搜索了一下看到这文章发现并不是由于Birt的原 ...

  3. [转]浅谈jQuery EasyUI的属性设置

    原文地址:http://www.easyui.info/archives/1664.html 对jQuery EasyUI有一定了解的话,应该知道基本上每一个组件都有一个"options&q ...

  4. mysql数据库行级锁的使用（二）

    项目上的另外一个需求是: 在做统计的时候需要将当前表锁定不能更新当前表记录 直接上代码 package com.robert.RedisTest; import java.sql.Connection ...

  5. Python中remove，del和pop的区别

    以a=[1,2,3] 为例,似乎使用del, remove, pop一个元素2 之后 a都是为 [1,3], 如下:http://Novell.Me >>> a=[1,2,3] &g ...

  6. extracting lines bases a list using awk

    extracting lines bases a list using awk awk 'NR==FNR{a[$1]=$0; next}($1 in a){print a[$1]"\n&qu ...

  7. 【unity shaders】：Unity中的Shader及其基本框架

    shader和Material的基本关系 Shader(着色器)实际上就是一小段程序,它负责将输入的Mesh(网格)以指定的方式和输入的贴图或者颜色等组合作用,然后输出.绘图单元可以依据这个输出来将图 ...

  8. oracle11g 拆分字符串的详细技巧

    转自:http://m.blog.csdn.net/article/details?id=51946573 <-->功能需求                 有一个比较长的SQL语句,查询 ...

  9. Leetcode 112. Path Sum

    Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...

  10. springMVC-数据绑定流程

    1.Spring MVC主框架将ServletRequest对象以及目标方法的入参实例传递给WebDataBinderFactory实例,以创建DataBinder(数据绑定器)实例对象 2.Data ...