如何用HTML5的FileReader生成Data Url

  • 原创
  • |
  • 浏览：1798
  • |
  • 更新：
  • 如何用HTML5的FileReader生成Data Url1
  • 如何用HTML5的FileReader生成Data Url2
  • 如何用HTML5的FileReader生成Data Url3
  • 如何用HTML5的FileReader生成Data Url4
  • 如何用HTML5的FileReader生成Data Url5
  • 如何用HTML5的FileReader生成Data Url6
  • 如何用HTML5的FileReader生成Data Url7
分步阅读

什么是Data Url呢？Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。那么如何才能生成Data Url呢？今天我就教大家自己用HTML5的FileReader生成Data Url的方法。

如何用HTML5的FileReader生成Data Url

工具/原料

  • <p>Notepad++或是记事本</p>
  • <p>支持HTML5的浏览器,Chrome对HTML5支持的比较好</p>
  • <p>图片</p>

方法/步骤

  1. 1

    新建文本文档

    如何用HTML5的FileReader生成Data Url
  2. 1
    该信息非法爬取自百度经验
  3. 2

    命名为：DataUrlBuiler.htm，一定要修改扩展名

    如何用HTML5的FileReader生成Data Url
  4. 3

    打开文件：DataUrlBuiler.htm，没有安装Notepad++的可以使用记事本

    如何用HTML5的FileReader生成Data Url
  5. 4

    添加以下基本内容：学过HTML的都懂的

    如何用HTML5的FileReader生成Data Url
  6. 5

    添加文件标签，文本框标签，图片标签

    如何用HTML5的FileReader生成Data Url
  7. 6

    添加生成DataUrl的脚本，保存文件

    如何用HTML5的FileReader生成Data Url
  8. 7

    用浏览器打开文件

    如何用HTML5的FileReader生成Data Url
  9. 8

    单击浏览文件来选择一张图片

    如何用HTML5的FileReader生成Data Url
    如何用HTML5的FileReader生成Data Url
  10. 9

    选择图片，单击打开后，文本框中就会输出DataUrl了，右侧的IMG标签就是使用刚生成的DataUrl的。

    如何用HTML5的FileReader生成Data Url
  11. 10

    怎么样，很简单吧！

    END
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部