在HTML5中，通过FileReader可以轻松的实现这个功能。


只要在<input type="file" />文件表单元素中监听 onchange 事件，然后通过FileReader读取图片文件，然后将读取的内容在<img>中显示即可。


实现代码

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="utf-8"/><metaname="author"content="EdieLei"/><title>HTML5图片上传预览</title><scripttype="text/javascript"src="jquery.js"></script><scripttype="text/javascript">$(function(){$('#img').change(function(){varfile=this.files[0];//选择上传的文件varr=newFileReader();r.readAsDataURL(file);//Base64$(r).load(function(){$('div').html('<imgsrc="'+this.result+'"alt=""/>');});});});</script></head><body><h4>HTML5图片上传预览</h4><inputid="img"type="file"accept="p_w_picpath/*"/><br/><div></div></body></html>



参考资料： html5实现上传图片预览 http://www.studyofnet.com/news/856.html