想基于draft.js 图片js实现这样一个富文本編辑器如果一个人开发的话，需要什么样的技

快速创建一个交互式的HTML模型汽车采购Lorem存有/图像发生器用最少的HTML标记，且没有任何服务器端代码

自动生成基于内容的HTML数据属性

这篇文章主要介绍了JavaScript中读取和保存文件实例,使用HTML5 File API实现,需要的朋友可以参考下

话说今天只是粗略浏览了一下Proxy SwitchySharp的源码就收获了不少东西，其中就包括本文要介绍的读取和保存文件

因为Google还不提供同步插件数据的功能，所以导入和导出插件配置就必须和文件打交道了而出于安全原因，只有IE才提供访问文件的API；但随着HTML 5的到来其他浏览器也纷纷支持了。

首先说读取文件W3C提供了一些File API，其中最重要的是FileReader这个类

先列出需要用到的HTML标签：

当选择了┅个文件时，就会把包含这个文件的列表（一个FileList对象）作为参数传给handleFiles()函数了

这个FileList对象类似一个数组，可以知道文件的数目而它的元素僦是File对象了。

把这个File对象传给FileReader对象的读取方法就能读取文件了。

FileReader对象在读取文件后还需要进行处理。为了不阻塞当前线程API采用了事件模型，可以注册这些事件：
3.onload：文件成功读取完毕时触发
4.onloadend：文件读取完毕时触发无论是否失败
6.onprogress：当文件读取时，周期性地触发

有了这些方法以后就可以处理文件了。
先来试试读取文本文件：

测试一下你会发现这个文件的内容被添加到网页中了如果是用Chrome的话，必须把网頁放在服务器上或插件里file协议下会失败。

再来试试图片因为浏览器可以直接显示Data URI协议的图片，所以这次就添加图片：

其实input:file控件还支持選择多个文件：

我研究了一下发现了其中的奥秘。

拿到下载地址后创建一个a元素，将下载地址赋值给href属性文件名赋值给download属性（Chrome 14+支持）。
然后再创建一个click事件交给这个a元素处理，就会导致浏览器开始下载这个Blob对象了

下面就是一段化简的代码：

测试时会提示保存一个攵本文件。Chrome需要把网页放在服务器上或插件里