MUI 圖片上傳實現

本文轉載自查看原文 2017-11-24 10:56 4657 MUI圖片上傳/ JS

HTML代碼

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>信息修改</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/mui.picker.min.css" />
        <link rel="stylesheet" href="css/common.css" />
        <link rel="stylesheet" href="css/personInfor.css" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">信息修改</h1>
            <a class="mui-icon mui-icon-more mui-icon-right-nav mui-pull-right"></a>
        </header>
        <div class="mui-content">
            <ul class="info_ul">
                <li class="portrait_li">
                    <div class="portrait">
                        <img id="headImage" style="width: 100%;height: 100%;" src="" onerror="this.src='img/head.png'"/>
                    </div>
                </li>
                <li>
                    <div class="button" onclick="upload(0)">上 傳</div>
                </li>
                <li>
                    <p>用&nbsp;&nbsp;戶&nbsp;&nbsp;名</p>
                    <input type="text" id="userName" placeholder="請輸入用戶名" />
                </li>
                <li>
                    <p class="born">出生日期</p>
                    <button id='result' data-options='{"type":"date","beginYear":1900,"endYear":2017}' class="btn mui-btn mui-btn-block">選擇日期 </button>
                </li>
                <li class="mui-input-row">
                    <p>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;別</p>
                    <span class="radio_inline mui-radio">
                        <input name="radio" type="radio" id="radio_man" checked value="1">
                        <label>男</label>
                        <input name="radio" type="radio" id="radio_woman" value="2">     
                        <label>女</label>        
                    </span>
                </li>
                <li>
                    <p>手機號</p>
                    <input type="text" id="phoneNum" placeholder="請輸入手機號" />
                </li>
                <li>
                    <p>銀行卡號</p>
                    <input type="text" id="bankNum" placeholder="請輸入銀行卡號" />
                </li>
                <li>
                    <p>銀行名稱</p>
                    <input type="text" id="bankName" placeholder="請輸入銀行名稱" />
                </li>
                <li>
                    <p>開&nbsp;&nbsp;戶&nbsp;&nbsp;名</p>
                    <input type="text" id="accountName" placeholder="請輸入開戶名" />
                </li>
                <li>
                    <p>銀行支行</p>
                    <input type="text" id="bankSub" placeholder="請輸入銀行支行" />
                </li>
                <li>
                    <p>餐飲商名稱</p>
                    <input type="text" id="cateringName" placeholder="請輸入餐飲商名稱" />
                </li>
                <li>
                    <p>營業執照</p>
                    <div class="file">
                        <img id="file" style="width:10%;height:10%;" src="" onerror="this.src='img/head.png'"/>
                        <div class="button" onclick="upload(1)">上 傳</div> 
                    </div>
                </li>
                <li>
                    <input type="text" id="relativeUrl" /><br />
                    <input type="text" id="absoluteUrl" />
                </li>
            </ul>
            <button id="btn_confirm" onclick="confirm()">確認修改</button>
        </div>

        <script src="js/mui.min.js"></script>
        <script src="js/mui.picker.min.js"></script>
        <script src="js/md5.js"></script>
        <script src="js/common.js"></script>
        <script src="js/personInfo.js"></script>
        <script src="js/image.js"></script>
        <script src="js/jquery-1.9.1.min.js"></script>
    </body>

</html>

用到的 JS 是 mui.picker.min.js (其他JS為此次項目需要的，無需理會)

  1 var server = "http://192.168.1.149/hq_svn/app_file.php";
  2 var files = document.getElementById('file');
  3 var headImage = document.getElementById('headImage');
  4 //擴展API完成后執行的操作
  5 function plusReady() {
  6     headImage.addEventListener('click', function() {
  7         page.imgUp(0);
  8     });
  9     files.addEventListener('click', function() {
 10         page.imgUp(1);
 11     });
 12 }
 13 //彈出系統按鈕選擇框
 14 var page = null;
 15 page = {
 16     imgUp: function(num) {
 17         var m = this;
 18         /* console.log(m);*/
 19         plus.nativeUI.actionSheet({
 20             cancel: "取消",
 21             buttons: [{
 22                     title: "拍照"
 23                 },
 24                 {
 25                     title: "從相冊中選擇"
 26                 }
 27             ]
 28         }, function(e) { //1 是拍照  2 從相冊中選擇  
 29             switch(e.index) {
 30                 case 1:
 31                     appendByCamera(num);
 32                     break;
 33                 case 2:
 34                     appendByGallery(num);
 35                     break;
 36             }
 37         });
 38     }
 39 }
 40 // 上傳文件
 41 function upload(num) {
 42     if(num == 0 && headImage.src.indexOf('img/head.png') > -1) {
 43         plus.nativeUI.alert("請添加上傳文件！");
 44         return;
 45     }
 46     if(num == 1 && files.src.indexOf('img/head.png') > -1) {
 47         plus.nativeUI.alert("請添加上傳文件！");
 48         return;
 49     }
 50     console.log("開始上傳：")
 51     var wt = plus.nativeUI.showWaiting();
 52     var task = plus.uploader.createUpload(server, {
 53             method: "POST"
 54         },
 55         function(t, status) { //上傳完成
 56             if(status == 200) {
 57                 var strData = t.responseText;
 58                 if(strData != "") {
 59                     var data = strData.split(",");
 60                     document.getElementById("relativeUrl").value = (data[0].split(":"))[1];
 61                     document.getElementById("absoluteUrl").value = (data[1].split(":"))[1];                    
 62                     plus.nativeUI.alert("上傳成功!");
 63                 }
 64                 wt.close();
 65             } else {
 66                 plus.nativeUI.alert("上傳失敗：" + status);
 67                 wt.close();
 68             }
 69         }
 70     );
 71     //添加其他參數
 72     if(num == 0) {
 73         task.addFile(headImage.src, {
 74             key: "file"
 75         });
 76     }
 77     if(num == 1) {
 78         task.addFile(files.src, {
 79             key: "file"
 80         });
 81     }
 82     task.start();
 83 }
 84 // 拍照添加文件
 85 function appendByCamera(num) {
 86     plus.camera.getCamera().captureImage(function(e) {
 87         plus.io.resolveLocalFileSystemURL(e, function(entry) {
 88             var path = entry.toLocalURL();
 89             console.log("num:" + num);
 90             if(num == 0) {
 91                 console.log("00");
 92                 $("#headImage")[0].src = path;
 93             } else {
 94                 console.log("11");
 95                 $("#file")[0].src = path;
 96             }
 97         }, function(e) {
 98             mui.toast("讀取拍照文件錯誤：" + e.message);
 99         });
100 
101     });
102 }
103 // 從相冊添加文件
104 function appendByGallery(num) {
105     plus.gallery.pick(function(path) {
106 
107         if(num == 0) {
108             console.log("000");
109             $("#headImage")[0].src = path;
110         } else {
111             console.log("111");
112             $("#file")[0].src = path;
113         }
114     });
115 }
116 //擴展API是否准備好，如果沒有准備好則監聽plusReady  
117 if(window.plus) {
118     plusReady();
119 } else {
120     document.addEventListener("plusready", plusReady, false);
121 }

時間比較趕代碼有些粗糙，還可以封裝的。由於用的是H5+東西要測試需要真機才能運行。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 mui實現圖片更換（暫未上傳） MUI + Spring MVC 實現多圖片上傳 MUI 上傳圖片案例 mui 上傳圖片 MUI實現圖片預覽功能 Hbuilder mui 相冊拍照圖片上傳 mui + H5 調取攝像頭和相冊實現圖片上傳 MUI上傳圖片之選擇相冊和相機上傳 MUI 單圖片壓縮上傳（拍照+系統相冊）：選擇立即上傳 MUI---上傳頭像功能實現