唉，为什么我一个做大数据和后端的要为前端耗尽心力啊？？！！
昨天在做一个网页时遇到了一个问题，有一处需要插入图片，我原本的想法是获取到上传文件的URL，然后动态插入img标签，设置src为图片的URL进而实现实时预览，结果遇到了浏览器安全防护的问题，获取到的文件路径被浏览器主动修改为了“C://fakePath/XXX”的形式。
经过查询，发现了问题所在，并有两种解决方法，一是关闭浏览器的安全验证（见鬼去啦！），二是通过window.URL.createObjectURL(obj)获取图片的URL。
方法一是不可能用的了，那么就试试第二种，但是也不知道出了什么问题，这个方法也没有作用。
就在我即将放弃，打算用“文件1”“文件2”的形式来代替实时预览时，一个方案拯救了我！！！
首先贴上原地址：https://blog.csdn.net/scrat_kong/article/details/79230329
这个方法是就是通过FileReader直接读取文件内容到浏览器中！相比使用URL引用图片，这个简单直接又粗暴，直接将数据读到浏览器里展示！
FileReader对象读取到的数据就存放在当前对象的result属性中，如图所示：
效果展示：
基于这个方法，我对代码进行了修改，如下所示：
这样就可以实现图片动态插入试试预览了，相比引用URL，该方法的区别有：
1）非引用，而是直接将图片（数据）插入到了网页中；
2）如果插入的图片过多可能会导致浏览器停止响应（可能是占用内存的原因）；
其中2）我就遇到过，因此在图片插入后请务必使用FileReader.abort()方法终止文件读取。
此外，既然能够读取到文件的内容，那么是否可以直接通过字符数量判断文件大小？
我对此进行了验证，通过多张图片的字符长度和实际字节长度的对比，我发现FileReader对象读取到的文件字符长度和文件实际字节长度的比值大概是1.33。
也就是说，通过如下语句可以求出文件的大小：
var fileSize = this.result.split(",")[1].length/(1024*1024*1.33);
通过多次验证，该方法获取到的文件容量大小误差在10KB以内。如下所示：
最终，通过这种方法，实现了上传图片的大小判断和实时预览：
