jquery部分
$(function(){
			$("#photo_sub").click(function(){//上传图片按钮
				$("#pic").click();
			});			
			$(‘#pic‘).change(function(){				
			var file=this.files[0];
			var reader=new FileReader();			
			reader.onload=function(){
			// 文件加载完成之后执行
			var url=reader.result;
			 document.getElementById("dd").src=url;
			};		
			reader.readAsDataURL(file);			
			});
			$("#files").click(function(){
				
				$("#picform").submit();
			});
		
		});
html部分
<div class="grzp mt50 mb60">
<div class="step3"></div>
<div class="grzp_info">
<div class="grzp_fl" >
 	<div id="fileList">
	<img id="dd" style="" >
</div>
<h4>个人照片</h4>
<span>请上传清晰的免冠照片</span>
</div>
            <div class="grzp_fr">			   
		<form method="post" action="pic_submit.jsp?id=1" id="picform"  enctype="multipart/form-data"> 
			   <input file="file" accept="image/*;capture=camcorder"  type="file" id="pic" name="pic" value=""  style="display:none;">		
				<a href="#"><img id="photo_sub"  src="images/zantp.png"><span>添加照片</span></a>
	  </form>
             </div>
</div>
<em>*证件照片仅用作认证,不会向用户展示</em>
<a href="#" id="files" class="btn mt46">下一步</a>
</div>
原文:http://www.cnblogs.com/driftking/p/5197168.html