html5-FileReader實現上傳圖片實時預覽

普通的文件上傳只能看到它的文件名，而如果要實現選擇某一張圖片則可以利用html5的FileReader完成

下面是實現步驟：
html:

這裏是上傳圖片的內容，onchange="getFile()"爲選擇文件後的轉換函數，後面會提及
上傳圖片的按鈕我這裏是自定義的，做法在另一篇博客裏

css:

預覽框我暫定爲100x100的正方形框，出來後圖片可能會有變形之類的，可以自定義

接下來是主要的JS部分
JS：

1. 首先，定義一個變量showFile保存實際要顯示的圖片的整個文件
   

2. 獲取預覽框，方便之後的顯示：
   
   準備工作做完了，現在開始轉碼

3. 編寫一個函數，將圖片路徑轉碼
   
   這樣就獲取到了轉碼後的圖片文件的src
   （注意：FileReader在IE裏是不兼容的，IE 6-9完全不兼容，IE 10-11需要寫兼容）

4. 接下來就是轉換啦
   
   這裏將選擇的文件獲取到之後，再賦給全局文件（如果點開了選擇框但是沒有選擇文件即爲之前的文件本身），再回調函數裏將src賦給預覽框
   這一步的完成時間是在file框的onchange中完成的

5. 然後效果就完成啦，看看成果吧
   選擇之前：
   
   因爲我沒有給img賦src,所以爲空白
   選擇之後：
   
   選擇圖片就可以預覽啦，再選擇圖片一樣可以預覽

樣式簡潔，可以自己定義，比如寫個+什麼的
像這種：

樣式就自己定義好了。