图片粘贴预览-FileReader

在开发输入编辑器时，往往会用到本地图片，或者截屏粘贴到编辑器中的情况。
这个思路是，将图片转化为URL格式的字符串，来表示文件内容，通过设置src属性，进而显示出完整图片。

我的启蒙文章将截图实时显示在浏览器中，我通过这篇启蒙文章亲自敲打了一遍，发现确实功能强大。但是遗憾的是，只有在Chrome中才起作用，使得我不得不去学习clipboardData对象以及FileReader对象。

FileReader

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File
对象或者Blob
对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList
对象,也可以来自拖放操作生成的 DataTransfer
对象,还可以是来自在一个HTMLCanvasElement
上执行mozGetAsFile()方法后的返回结果

var eventData = {
    type: 'auto',
    method: 'paste',
    dataTransfer: clipboard.initPasteDataTransfer( evt )
};

~~~

var imgFile = eventData.dataTransfer.getFile(0);

~~~

if(imgFile && imgFile.type == 'image/png'){
  var reader = new FileReader();
  reader.readAsDataURL( imgFile );
}
setTimeout( function() {
    if(imgFile && imgFile.type == 'image/png'){
        eventData.binaryFlow = reader.result;
    }
    firePasteEvents( editor, eventData);
}, 0 );             

//将二进制流赋给src
imgElement.setAttribute('src',e.data.binaryFlow);

若要存储，利用后台语句进行转换，