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