首頁 > 開發者 > 手機程式開發

web調用手機相簿，並實現動態增加圖片功能

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：cep   charset   images   key   min   選擇   ORC   pac   標題   

註：經測試h5調用相簿效果有相容性問題，安卓僅能調用拍照功能（部分安卓可能會調不起來，所以建議用app原生調用），ios可調起拍照和相簿功能。 
<html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>無標題文檔</title>  <style type="text/css">  .role_info {    margin-bottom: 30px;}.role_info label {    display: block;    font-size: 24px;    color: #333;}.role_info input {    width: 100%;    margin-top: 30px;    font-size: 26px;    color: #999;    padding-bottom: 15px;    border-bottom: 1px solid #F3F3F3;}.upload_img .img{    position: relative;}     .close{    z-index:  666;    font-size: 30px;    right:  0;    width: 24px;    height: 24px;    background: #000000;    opacity: 0.4;    color: #ffffff;    line-height: 24px;    float: right;    position: absolute;}</style>  </head>    <body>      <form id=‘upload_user_img‘>            <div class="role_info">            <label for="product_force" class="border_left">上傳資料</label>            <div class="upload_img">                <div class="img cimg_0" id="upload_btn">                    <label class="limg_0">                        <img src="images/upload_img.png" class=‘img_view_0‘ mtype=‘1‘/>                        <input class="icimg_0" name="files" type="file" accept="image/*" value="" capture="camera" onchange="xmTanUploadImg(this,0)" style="opacity:0;visibility:collapse;" />                    </label>                 </div>            </div>        </div>    </form></body>   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">  //選擇圖片，馬上預覽function xmTanUploadImg(obj,key) {    var file = obj.files[0];    var reader = new FileReader();    console.log(‘src:‘,this);    //讀取檔案過程方法    reader.onloadstart = function (e) {        console.log("開始讀取....");    }    reader.onprogress = function (e) {        console.log("正在讀取中....");    }    reader.onabort = function (e) {        console.log("中斷讀取....");    }    reader.onerror = function (e) {        console.log("讀取異常....");    }    reader.onload = function (e) {        console.log("成功讀取....");        $(‘.img_view_‘+key).attr(‘src‘,e.target.result);        var img_mytype =  $(‘.img_view_‘+key).attr(‘mtype‘);        $(‘.icimg_‘+key).attr(‘name‘,‘files‘);        $(‘.limg_‘+key).before(‘<span class="close" onclick="del_img(\‘cimg_‘+key+‘\‘)">x</span>‘);        if(img_mytype == 1){            $(‘.img_view_‘+key).attr(‘mtype‘,2);            var keyR   = key+1;            console.log(‘keyR:‘+keyR);            var imgStr = ‘<div class="img cimg_‘+keyR+‘">‘+‘<label class="limg_‘+keyR+‘"><img src="images/upload_img.png" class="img_view_‘+keyR+‘" mtype="1"/>‘+            ‘<input class="icimg_‘+keyR+‘" name="files" type="file" accept="image/*" value="" capture="camera" onchange="xmTanUploadImg(this,‘+keyR+‘)" style="opacity:0;visibility:collapse;" />‘+            ‘</label></div>‘;            $(‘.cimg_‘+key).after(imgStr);        }    }    reader.readAsDataURL(file)}</script>  </html>

：

 

web調用手機相簿，並實現動態增加圖片功能

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More