随笔- 530 文章- 2 评论- 82 阅读- 146万

手机端调用系统相册并上传图片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 });