（JavaScript）实现上传图片实时预览和（文件）大小判断

唉，为什么我一个做大数据和后端的要为前端耗尽心力啊？？！！

昨天在做一个网页时遇到了一个问题，有一处需要插入图片，我原本的想法是获取到上传文件的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以内。如下所示：

　　

　　

　　

最终，通过这种方法，实现了上传图片的大小判断和实时预览：