手机端调用系统相册并上传图片html及样式实现
css：
1 .upload-img{ 2 width:80%; 3 position:fixed; 4 top:50%; 5 left:50%; 6 margin-left:-40%; 7 #fff; 8 border-radius: 10px; 9 z-index:1000; 10 display:none; 11 } 12 .upload-img>p:first-child{ 13 height:50px; 14 line-height: 50px; 15 border-bottom:2px solid #ccc; 16 padding:0 20px; 17 font-size: 2.2rem; 18 } 19 #open-picture,#open-camera{ 20 height:40px; 21 line-height: 40px; 22 padding:0 20px; 23 font-size: 2rem; 24 cursor: pointer; 25 } 26 #open-picture{ 27 border-bottom:1px solid #ccc; 28 } 29 .mask{ 30 background:#000; 31 opacity: 0.8; 32 width:100%; 33 height:100%; 34 z-index:999; 35 position: fixed; 36 top:0; 37 left:0; 38 display: none; 39 } 40 41 #picture,#camera{ 42 position:absolute; 43 top:0px; 44 left:0px; 45 width:100%; 46 height:100%; 47 margin:0px; 48 opacity: 0; 49 filter: "alpha(opacity=0)"; 50 filter: alpha(opacity=0); 51 -moz-opacity: 0; 52 }
html:
1 <p><img src="默认显示图片的路径地址" id="img"></p> 2 <form action="" id="upload-img" runat="server" method="post" enctype="multipart/form-data"> 3 <div class="upload-img"> 4 <p>上传照片</p> 5 <div style="position:relative;"> 6 <p id="open-picture"><span class="glyphicon glyphicon-picture rMar10"></span>相册</p> 7 <input type="file" name="picture" capture="camera" id="picture"/> 8 </div> 9 <div style="position:relative;"> 10 <p id="open-camera"><span class="glyphicon glyphicon-camera rMar10"></span>拍照</p> 11 <input type="file" name="camera" accept="image/*" id="camera"/> 12 </div> 13 </div> 14 </form>
js:
1 $("#img").click(function(){ 2 $(".upload-img").show(); 3 $(".mask").show(); 4 }); 5 $(".mask").click(function(){ 6 $(".mask").hide(); 7 $(".upload-img").hide(); 8 });
