上傳圖片或者文件我們都清楚，需要用到 input[type = file] 標簽，然后我們在js中通過選擇器獲取上傳的文件數組，即可獲得文件並提交給后台。
想要做到圖片預覽，就需要獲取可讀取到該圖片文件的臨時url，js中windows對象提供了接口：
1 function getObjectURL(file) { 2 var url = null ; 3 if (window.createObjectURL!=undefined) { // basic 4 url = window.createObjectURL(file) ; 5 } else if (window.URL!=undefined) { // mozilla(firefox) 6 url = window.URL.createObjectURL(file) ; 7 } else if (window.webkitURL!=undefined) { // webkit or chrome 8 url = window.webkitURL.createObjectURL(file) ; 9 } 10 return url ; 11 },
獲取到url之后，通過js事件動態添加到預覽區img標簽的url屬性中即可成功預覽。
當然往往我們不僅需要預覽，還有關於預覽圖片的一系列操作，比如刪除、添加新的圖片等等，這些操作看起來復雜，但是核心還是要把控好上傳的文件數組files[]和對應的url數組urls[]，依據自己的功能需要，改變這兩個數組，再配合html元素的動態渲染，只要肯花時間，實現一個功能完善的圖片上傳+預覽組件，不是什么難事。
實際開發不必學習階段，往往需要節省開發時間，這里可以推薦使用UI框架，比如bootstrap、element-ui等。
這里有篇關於bootstrap文件上傳組件bootstrap fileinput的介紹：https://zhuanlan.zhihu.com/p/23908279
發布時間：2019-05-22 17:58:21
與標題毫無關系的瞎扯
學技術之余補點英語：
complete和 finished 都有形容詞屬性，似乎都有"完成的"的意思，但它們的差異其實是天差地別的。
下面我用了三個例句說明complete 和 finished 都該怎么用，大家可以總結一下用法，回復在評論區：
筆記（正確譯法）：
When you marry the right woman, you are complete.
娶對老婆，一輩子成功。
When you marry the wrong woman, you are finished.
娶錯老婆，一輩子完了。
When the right one catches you with the wrong one, you are completely finished.
當老婆抓到你和小三，你就徹底完了。