MUI 图片上传实现

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=" 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="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+东西要测试需要真机才能运行。