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

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

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

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

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