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