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="width: 100%;height: 100%;" src="" onerror="this.src='img/head.png'"/> </div> </li> <li> <div class="button" onclick="upload(0)">上 传</div> </li> <li> <p>用 户 名</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>性 别</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>开 户 名</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为此次项目需要的，无需理会)
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+东西要测试需要真机才能运行。
