你js代碼把文件以base64編碼形式展示了出來(lái)，是為了讓用戶(hù)上傳文件之前能夠預(yù)覽對(duì)吧文件的IO操作需要用后端來(lái)實(shí)現(xiàn)，如果你只是做web前端開(kāi)發(fā)的話(huà)，就沒(méi)有必要研究這個(gè)東西，如果你是后端開(kāi)發(fā)者的話(huà)可以嘗試一下，相關(guān)的資料很多，我寫(xiě)個(gè)示例吧，后端用php為例html實(shí)現(xiàn)lt！DOCTYPE htmllthtmllthead。

3FileReader 對(duì)象允許應(yīng)用程序異步讀取存儲(chǔ)在計(jì)算機(jī)上的文件的內(nèi)容，使用 File 或 Blob 對(duì)象指定讀取的文件或數(shù)據(jù)其中File對(duì)象可以是來(lái)自ltinput元素上選擇文件后返回的FileList對(duì)象4readAsDataURL將讀取出來(lái)的圖像文件，直接顯示在網(wǎng)頁(yè)上，達(dá)到預(yù)覽效果代碼展示lt！DOCTYPE htmllthtmlltheadltmeta。

光靠CSS不行，可以使用JS代碼，當(dāng)用戶(hù)選擇文件后，立即讀取文件類(lèi)型filetype可以用html5的FileReader然后根據(jù)不同的filetype，顯示不同圖標(biāo)。

新建文本文檔 命名為DataUrlBuilerhtm，一定要修改擴(kuò)展名 打開(kāi)文件DataUrlBuilerhtm，沒(méi)有安裝Notepad++的可以使用記事本 添加以下基本內(nèi)容學(xué)過(guò)HTML的都懂的 添加文件標(biāo)簽，文本框標(biāo)簽，圖片標(biāo)簽 添加生成DataUrl的腳本，保存文件 用瀏覽器打開(kāi)文件 單擊瀏覽文件來(lái)選擇一張圖片 選擇圖片，單擊打開(kāi)后。

1創(chuàng)建三個(gè)html標(biāo)簽，input用來(lái)上傳圖片，textarea用來(lái)顯示base64代碼，因?yàn)閎ase64代碼內(nèi)容很多所以使用textarea標(biāo)簽，p標(biāo)簽用來(lái)顯示圖片2使用js調(diào)用html5的FileReaderreadAsDataURL的API，聲明三個(gè)變量用于控制圖片上傳，base64代碼顯示以及圖片的顯示3img_uploadaddEventListener#39change#39，readFile，fa。