唉，為什么我一個做大數據和后端的要為前端耗盡心力啊？？！！
昨天在做一個網頁時遇到了一個問題，有一處需要插入圖片，我原本的想法是獲取到上傳文件的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以內。如下所示：
最終，通過這種方法，實現了上傳圖片的大小判斷和實時預覽：
