其中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将上面获得的图片数据上传到后台脚本例如使用jQuery时html view plaincopy post#39uploadphp#39， #39data#39 data 在后台我们用PHP脚本接收数据并存储为图片html view plaincopy function。

直接用ftp工具，将你html或者htm结尾的文件放到服务器的运行目录 然后通过你的网站html名字html。

readerreadAsDataURLfile这样就能够在不上传到服务器的前提下预览图片当然，这个问题的重点是获取图片的原始尺寸，html5里还提供了两个变量来获取naturalWidth和naturalHeight，这两个分别来获取图片的原始宽度和原始高度。