Antecedentes del desarrollo: el framework front-end usa un framework de estilo sui, la página usa jq;
1. Introduzca dinámicamente archivos js relacionados
Debido a las características de enrutamiento de sui, al saltar a una nueva página, los js de la nueva página no se pueden cargar, solo se cargan y se ejecutan los js de la página principal, y los objetos y métodos definidos en la nueva página básicamente no están disponibles para llamar; verificar en modo de depuración Al ver el salto de página, solo ha cambiado el contenido html de la página estática y el js sigue siendo el js de la página antes del salto. Por lo tanto, aquí se usa el método de salto de página de monitoreo, y la cámara js se introduce dinámicamente;
$(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);
}
});
Dos, elementos de la página
<!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>
En tercer lugar, introduzca estilos CSS relevantes
<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>
Nota: Los dos archivos readimage.js y exif.js se pueden descargar de mis recursos; además, este método también soluciona el problema de la rotación de imágenes después de cargar imágenes en algunos teléfonos Android; el front-end convierte las imágenes en codificación base64, datos unificados y de formulario Envíelos al fondo para su procesamiento y luego convierta la codificación de la imagen en un archivo en segundo plano; también puede usar el método de envío de datos de formulario para transferir el archivo de imagen a la interfaz de fondo; el efecto es el siguiente: