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. js-读取上传文件后缀

    /** * 读取文件后缀名称,并转化成小写 * @param file_name * @returns */ function houzuiToLowerCase(file_name) { if (f ...

  2. dede使用方法----调用列表页的分页功能

    分页的标签:<div class="dede_pages"> <ul class="pagelist"> {dede:pagelist ...

  3. 【Codeforces 723B】Text Document Analysis 模拟

    求括号外最长单词长度,和括号里单词个数. 有限状态自动机处理一下. http://codeforces.com/problemset/problem/723/B Examples input 37_H ...

  4. 【POJ 2480】Longge's problem（欧拉函数）

    题意 求$ \sum_{i=1}^n gcd(i,n) $ 给定 $n(1\le n\le 2^{32}) $. 链接 题解 欧拉函数 $φ(x)$ :1到x-1有几个和x互质的数. gcd(i,n) ...

  5. Python 序列通用操作介绍

    上一篇:python字符串基础一 下一篇:Python 列表操作简介 序列概览 Python包含6种内置的序列:列表.元组.字符串 .Unicode字符串.buffer对象.xrange对象.在序列中 ...

  6. OPENGGL深度测试

    深度测试是为了解决那些在绘图过程中本应该被隐藏的面结果却出现了,例如: 绘图代码中先绘制了一个一个近处的立方体,后绘制了一个远处的立方体,结果在绘制过程中,远处的立方体总是在近处的立方体后绘制,所以在 ...

  7. ml的线性回归应用（python语言）

    线性回归的模型是:y＝theta0*x+theta1   其中theta0,theta1是我们希望得到的系数和截距. 下面是代码实例: 1. 用自定义数据来看看格式: # -*- coding:utf ...

  8. dpm-release3.1在windows下的配置

    dpm-release3.1在windows下的配置 dpm是做目标检测objecjt detection的经典方法.dpm系列代码默认是在linux和mac下运行测试过的,windows下默认是不能 ...

  9. 在数据库中如果组合主键（假设为stuID和stuName）存在则更新，不存在则新增

    这是今天在项目中遇到的问题,后来查了一下,有的网友说可以用存储过程,但自己现在还不会用,所以下记载下来,做为学习存贮过程的引子. 现在是在java中实现了这个if的逻辑,

  10. 【bzoj1912】 Apio2010—patrol 巡逻

    http://www.lydsy.com/JudgeOnline/problem.php?id=1912 (题目链接) 题意 给出一棵树,要求在树上添加K(1 or 2)条边,添加的边必须经过一次,使 ...