css：

網頁設計是網站建設的前奏，好的網頁設計更深度的剖析產品和設計風格定位，結合最新的網頁設計流行趨勢，與WVI應用標準，設計出具企業(yè)表現(xiàn)力，大器而深穩(wěn)的網站界面設。成都創(chuàng)新互聯(lián)公司從2013年開始,是成都網站建設公司:提供企業(yè)網站設計,品牌網站建設,營銷型企業(yè)網站建設方案,響應式網站建設,成都微信小程序,專業(yè)建站公司做網站。

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

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享文章：手機端上傳相冊圖片-創(chuàng)新互聯(lián)
當前網址：http://www.rwnh.cn/article14/eppge.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站維護、網站建設、商城網站、定制網站、網站導航、靜態(tài)網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)