首页 > Web开发 > 详细

上传图片,开启预览

时间:2016-02-18 10:12:01      阅读:214      评论:0      收藏:0      [点我收藏+]

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!