开发背景：前端框架使用sui样式框架；页面使用jq；
一、动态引入相关的js文件
由于sui的路由特性，在跳转到新页面时，新页面的js是无法加载的，只有主页面的js加载且运行，新页面定义的对象和方法基本都没法调用；在调试模式下查查看页面跳转时，只有静态的页面html内容变化了，而js还是跳转前页面的js，所以，这里使用了监听页面跳转方法，动态引入调用相机js；
$(document).on("pageInit", function (e, pageId, $page) {
if (pageId == "index-page") {
console.log("index-page");
page = 1;
list='';
initIndexList(page, limit);
//首次进入首页校验加载图标是否显示
if (count<=limit){
$('.infinite-scroll-preloader').remove();
}
} else if (pageId == "addpage") {
//新增页面
console.log("addpage");
//动态加载js文件
loadJsFile("categoryJs.js");
loadJsFile("readimage.js");
loadJsFile("exif.js");
$('.content').scrollTop(0);
}else if (pageId == "datailPage") {
//详情页面
console.log("datailPage");
$('.content').scrollTop(0);
viewInfoPage(idFlag);
}
});二、页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>app</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="/sui-mobile/css/sm.min.css" media="all"/>
<script src="/sui-mobile/jquery-3.1.1/jquery.min.js"></script>
<!--<script src="/common/bootstrap-3.3.0/js/bootstrap.min.js"></script>-->
<script src="/sui-mobile/js/sm.js"></script>
</head>
<body>
<div class="page-group">
<!-- page 容器 -->
<div class="page" id="addpage">
<!-- 标题栏 -->
<header class="bar bar-nav">
<!--<a class="icon icon-me pull-left open-panel"></a>-->
<button class="button button-link button-nav pull-left" onclick="toIndexPage2()">
<span class="icon icon-left"></span>
返回
</button>
<h1 class="title"></h1>
</header>
<!-- 这里是页面内容区 -->
<div class="content">
<div class="list-block">
<form>
<input type="hidden" name="" id="">
<input type="hidden" name="GUID_" id="GUID_">
<input type="hidden" name="SERVICETYPENAME" id="SERVICETYPENAME">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">申请事项</div>
<div class="item-input">
<select id="SERVICETYPECODE" name="SERVICETYPECODE" onchange="showTip()">
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">申请人</div>
<div class="item-input">
<input type="text" placeholder="请输入" id="CREATEUSERNAME" name="CREATEUSERNAME">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">身份证号</div>
<div class="item-input">
<input type="text" placeholder="请输入" id="IDENTITYNUM" name="IDENTITYNUM">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">联系电话</div>
<div class="item-input">
<input type="text" placeholder="请输入" id="CREATETELNUM" name="CREATETELNUM">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">地址</div>
<div class="item-input">
<input type="text" placeholder="请输入" id="ADDRESS" name="ADDRESS">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">事项描述</div>
<div class="item-input">
<textarea id="DESCRIP" name="DESCRIP" placeholder="请输入"></textarea>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">图片</div>
<div class="item-input" >
<div style="overflow: auto;white-space: nowrap;padding-top: 7px;padding-bottom: 7px;">
<!--<div style="width: 80px;height: 80px;display:inline-block;position: relative;border: #ECECEC 1px solid;text-align: center">
<img src="add.png" style="width: 40px;margin-top: 18px;">
<input id="upload" style="opacity:0;width:100%;height:100%;position:absolute;top:0;left:0" type="file" accept="image/*" multiple />
</div>-->
<!-- 图片放置区域 -->
<div id="pictureInfo" class="imageShow">
<div id="place1" style="display: none;">
<img onclick="layerImage(this,0)" src="" style="width: 100%;height: 100%;" id="place1-img"/>
</div>
<div id="place2" style="display: none;">
<img onclick="layerImage(this,1)" src="" style="width: 100%;height: 100%;" id="place2-img"/>
</div>
<div id="place3" style="display: none;">
<img onclick="layerImage(this,2)" src="" style="width: 100%;height: 100%;" id="place3-img"/>
</div>
<div id="place4" style="display: none;">
<img onclick="layerImage(this,3)" src="" style="width: 100%;height: 100%;" id="place4-img"/>
</div>
<div id="place5" style="display: none;">
<!--<img onclick="layerImage(this,4)" src="#" style="width: 100%;height: 100%;" id="place5-img"/>-->
</div>
<div id="place6">
<label for="files_upload1" id="upload">
<div style="border: 0px #f00 solid;width: 100%;"></div>
<input type="file" multiple="multiple" id="files_upload1" style="opacity: 0;width: 0;"/>
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="item-content tip-div" style="display: none;padding-right: .75rem;">
</div>
</li>
</ul>
</form>
</div>
<div class="content-block">
<a href="#" onclick="save()" class="button button-big button-fill">提交</a>
</div>
<div class="content-padded">
</div>
<div id="layer">
<img id="layerImg" src="" width="100%"/>
<p id="confirm" class="buttons-row"><a href="#" onclick="confirmY()" class="button active">确定</a><a href="#" onclick="confirmN()" class="button ">删除</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>三、引入相关css样式
<style type="text/css">
/*body{background: #f0f0f0;margin: 0;width: 100%;}*/
#upload {
border-top: 1px #CCC solid;
}
#place6 {
background-image: url(add.png);
background-repeat: no-repeat;
background-position: .6em;
background-size: 3em;
background-position-x: 47%;
}
.imageShow {
border: 0px #CCC solid;
height: 4.5em;
width: 100%;
/*margin-top: 10px;*/
}
.imageShow div {
float: left;
margin-left: 2%;
border: 1px #CCC solid;
width: 21%;
height: 4.5em;
}
.imageShow #place6{
border: 1px #CCC solid;
}
#imageInfo {
border: 0px #f00 solid;
position: absolute;
top: 8em;
right: 0;
left: 0;
bottom: 0;
background-color: black;
color: white;
font-size: 14px;
padding-left: 10px;
overflow: auto;
}
#layer {
z-index: 20;
border: 0px #f00 solid;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: black;
align-items: center;
justify-content: center;
display: none;
}
#confirm {
color: white;
position: absolute;
bottom: 0px;
}
#confirm div {
float: left;
border: 1px white solid;
padding-left: 50px;
padding-right: 50px;
padding-top: 8px;
padding-bottom: 8px;
}
.list-block .item-text {
}
</style>注意：readimage.js和exif.js两个文件可以到我的资源里下载；另外，该方法也修复了部分安卓手机拍照上传后图片的旋转问题；前端将图片转换成base64编码，统一和表单数据提交给后台处理，后台再将图片编码转换成文件；同样也可以使用formdata提交方式将图片文件传给后台接口也行；效果如下图：
