手机端上传相册图片-创新互联

css：

网页设计是网站建设的前奏，好的网页设计更深度的剖析产品和设计风格定位，结合最新的网页设计流行趋势，与WVI应用标准，设计出具企业表现力，大器而深稳的网站界面设。成都创新互联公司从2013年开始,是成都网站建设公司:提供企业网站设计,品牌网站建设,营销型企业网站建设方案,响应式网站建设,成都微信小程序,专业建站公司做网站。

.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 >
            <p id="open-picture"><span class="glyphicon glyphicon-picture rMar10"></span>相册</p>
            <input type="file" name="picture"  capture="camera" id="picture"/>
        </div>
        <div >
            <p id="open-camera"><span class="glyphicon glyphicon-camera rMar10"></span>拍照</p>
            <input type="file" name="camera" accept="p_w_picpath/*" id="camera"/>
        </div>
    </div>
</form>

js:

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

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：手机端上传相册图片-创新互联
当前网址：https://www.cdcxhl.com/article14/eppge.html

成都网站建设公司_创新互联，为您提供网站维护、网站建设、商城网站、定制网站、网站导航、静态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联