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

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

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

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

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