css：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
.upload-img{
width
:
80%
;
position
:
fixed
;
top
:
50%
;
left
:
50%
;
margin-left
:
-40%
;
background-color
:
#fff
;
border-radius:
10px
;
z-index
:
1000
;
display
:
none
;
}
.upload-img>p:first-child{
height
:
50px
;
line-height
:
50px
;
border-bottom
:
2px
solid
#ccc
;
padding
:
0
20px
;
font-size
:
2.2
rem;
}
#open-picture,#open-camera{
height
:
40px
;
line-height
:
40px
;
padding
:
0
20px
;
font-size
:
2
rem;
cursor
:
pointer
;
}
#open-picture{
border-bottom
:
1px
solid
#ccc
;
}
.mask{
background
:
#000
;
opacity:
0.8
;
width
:
100%
;
height
:
100%
;
z-index
:
999
;
position
:
fixed
;
top
:
0
;
left
:
0
;
display
:
none
;
}
#picture,#camera{
position
:
absolute
;
top
:
0px
;
left
:
0px
;
width
:
100%
;
height
:
100%
;
margin
:
0px
;
opacity:
0
;
filter:
"alpha(opacity=0)"
;
filter: alpha(opacity=
0
);
-moz-opacity:
0
;
}
|
html:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<
p
><
img
src
=
"默认显示图片的路径地址"
id
=
"img"
></
p
>
<
form
action
=
""
id
=
"upload-img"
runat
=
"server"
method
=
"post"
enctype
=
"multipart/form-data"
>
<
div
class
=
"upload-img"
>
<
p
>上传照片</
p
>
<
div
style
=
"position:relative;"
>
<
p
id
=
"open-picture"
><
span
class
=
"glyphicon glyphicon-picture rMar10"
></
span
>相册</
p
>
<
input
type
=
"file"
name
=
"picture"
capture
=
"camera"
id
=
"picture"
/>
</
div
>
<
div
style
=
"position:relative;"
>
<
p
id
=
"open-camera"
><
span
class
=
"glyphicon glyphicon-camera rMar10"
></
span
>拍照</
p
>
<
input
type
=
"file"
name
=
"camera"
accept
=
"image/*"
id
=
"camera"
/>
</
div
>
</
div
>
</
form
>
|
js:
|
1
2
3
4
5
6
7
8
|
$(
"#img"
).click(
function
(){
$(
".upload-img"
).show();
$(
".mask"
).show();
});
$(
".mask"
).click(
function
(){
$(
".mask"
).hide();
$(
".upload-img"
).hide();
});
|
本文转自 蓓蕾心晴 51CTO博客，原文链接：http://blog.51cto.com/beileixinqing/1877466，如需转载请自行联系原作者
