其中File對象可以是來自ltinput元素上選擇文件后返回的FileList對象4readAsDataURL將讀取出來的圖像文件，直接顯示在網頁上，達到預覽效果代碼展示lt！DOCTYPE htmllthtmlltheadltmeta charset=quotUTF8quotlttitle文件讀取lt。

lt！DOCTYPE HTML lthtml lthead ltmeta charset=quotutf8quot lttitlehtml5 圖片上傳預覽lttitle ltstyle #preview width 300px height 300px overflow hidden #preview i。

在前端可以使用Ajax將上面獲得的圖片數(shù)據(jù)上傳到后臺腳本例如使用jQuery時html view plaincopy post#39uploadphp#39， #39data#39 data 在后臺我們用PHP腳本接收數(shù)據(jù)并存儲為圖片html view plaincopy function。

直接用ftp工具，將你html或者htm結尾的文件放到服務器的運行目錄 然后通過你的網站html名字html。

readerreadAsDataURLfile這樣就能夠在不上傳到服務器的前提下預覽圖片當然，這個問題的重點是獲取圖片的原始尺寸，html5里還提供了兩個變量來獲取naturalWidth和naturalHeight，這兩個分別來獲取圖片的原始寬度和原始高度。