手机端上传相册图片

Posted 2020-08-21

css：

.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.2rem;
}
#open-picture,#open-camera{
    height:40px;
    line-height: 40px;
    padding:0 20px;
    font-size: 2rem;
    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:

<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:

$("#img").click(function(){
    $(".upload-img").show();
    $(".mask").show();
});
$(".mask").click(function(){
    $(".mask").hide();
    $(".upload-img").hide();
});

本文出自 “小叙前端” 博客，请务必保留此出处http://beileixinqing.blog.51cto.com/7540036/1877466