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+东西要测试需要真机才能运行。
来源：https://www.cnblogs.com/AlbertSmith/p/7889530.html