欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

手机端调用系统相册并上传图片

程序员文章站 2024-02-10 14:08:46
...

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 });