前端代码逻辑
1.html中的功能演示部分
<!-- 功能演示02 开始 -->
<div id="box02" class="box02 conAuto">
<p class="title">功能演示</p>
<div class="animalBox clearfix ">
<div class="animalBoxLeft fl">
<div class="tabBody">
<canvas class="demo-canvas-centerlize" width="1680" height="1050"
style="transform: translate(-50%, -50%) scale(0.499048);"></canvas>
<div class="activeImgBox">
<img id="img" src="{% static '/image/11.jpg'%}">
</div>
<div class="inputBox image-input">
<form id="form1" action="/upload" method="post" enctype="multipart/form-data">
<div class="image-input-container">
{% csrf_token %}
<label class="image-local">
<input id="file_img" type="file" name="file_img"
accept="image/png, image/bmp, image/jpg, image/jpeg" class="image-local-input">
上传检测
</label>
<!-- <input id="btn" class="image-local" style="margin-left: 100px;margin-top: 0px"
type="button" value="检测"> -->
</div>
<div style="margin:0 auto; margin-left: 500px;height:36px;margin-top: -530px;">
<select id="sel" name="city" class="layui-select"
style="height:36px; border: 2px solid skyblue;text-align: center;" lay-verify="">
<option value="">请选择遥感图像处理任务</option>
<option value="0">遥感图像场景分类</option>
<option value="1">遥感图像目标检测</option>
<option value="2">遥感图像目标分割</option>
</select>
</div>
</form>
<div class="image-notice" style="margin-top: 50px;">图片文件类型支持PNG、JPG、JPEG、BMP,图片大小不超过4M。</div>
</div>
</div>
<div class="tabHeader clearfix">
<div class="imgBox fl active">
<img src="{% static '/image/11.jpg'%}">
</div>
<div class="imgBox fl">
<img src="{% static '/image/22.jpg'%}">
</div>
<div class="imgBox fl">
<img src="{% static '/image/33.jpg'%}">
</div>
<div class="imgBox fl">
<img src="{% static '/image/44.jpg'%}">
</div>
<div class="imgBox fl">
<img src="{% static '/image/55.jpg'%}">
</div>
</div>
</div>
<div class="animalBoxRight fr pr">
<div class="ai-summary">
<div class="ai-finegrained">
<div class="ai-finegrained-title">识别结果</div>
<table id="tabletab" class="ai-finegrained-show">
</table>
</div>
</div>
</div>
</div>
</div>
<!-- 功能演示02 结束 -->
2.js部分
box1-4的跳转逻辑
window.onscroll = function () {
var scrollTop = $(document).scrollTop();
if (0 < scrollTop && scrollTop <= $('#box01').offset().top + 100) {
$('.nav a').removeClass('on');
$('.nav a').eq(0).addClass('on');
};
if ($('#box01').offset().top < scrollTop && scrollTop <= $('#box02').offset().top - 200) {
$('.nav a').removeClass('on');
$('.nav a').eq(0).addClass('on');
};
if ($('#box02').offset().top < scrollTop && scrollTop <= $('#box03').offset().top - 200) {
$('.nav a').removeClass('on');
$('.nav a').eq(1).addClass('on');
};
if ($('#box03').offset().top < scrollTop && scrollTop <= $('#box04').offset().top - 200) {
$('.nav a').removeClass('on');
$('.nav a').eq(2).addClass('on');
};
if ($('#box04').offset().top < scrollTop) {
$('.nav a').removeClass('on');
$('.nav a').eq(3).addClass('on');
};
}
页面上侧导航栏的跟随以及图片点击逻辑
$(function () {
$('.nav .a_btn').click(function () {
$(this).addClass("on");
$(this).siblings(".a_btn").removeClass('on')
})
//导航跟随
$(window).scroll(function (e) {
if ($(window).scrollTop() > 481) {
$('.nav').addClass('animated bounceInDown navFix');
} else {
$('.nav').removeClass('animated bounceInDown navFix');
}
});
// 图片点击
$('.tabHeader .imgBox').click(function () {
var src = $(this).find('img').attr('src');
$(this).addClass('active').siblings().removeClass('active');
$('.activeImgBox img').attr('src', src)
})
})
3. js重点部分——前后端数据交互
①点击上传检测确定图片后即触发change()事件函数,img标签更换src为loading的gif图。
②处理要上传的表单数据和格式,声明FormData()类,将img和select标签中的数据append到类中。
③ajax数据交互,指定向后端哪个URL发送请求,请求方式以及携带的数据。
④回调函数,处理返回的数据,返回的是json格式的数据。遍历返回的数据,用动态table显示,改img为预测图。
$("#file_img").change(function () {
// 朝后端发送ajax请求
// alert("文件已上传")
$("#img").attr("src", "http://152.136.16.20:8001/static/image/gif_1.gif")
let form_data = new FormData();//表单数据格式
form_data.append("files", document.getElementById('file_img').files[0])
form_data.append("select", document.getElementById('sel').value)
$.ajax({
// 1.指定朝哪个后端发送ajax请求
url: 'http://152.136.16.20:8001/upload', //不写就是朝当前地址提交【与form表单的action参数相同】
// 2.请求方式
type: 'post', // 不指定默认就是get,都是小写
// 3.数据
data: form_data,
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
processData: false, // 告诉jQuery不要去处理发送的数据
// 4.回调函数:当后端给你返回结果的时候会自动触发,args接受后端的返回结果
success: function (data) {
// var res_text = JSON.parse(data)
var stringfied = JSON.stringify(data)
// console.log(stringfied)
console.log("上传成功!");
console.log(data.img_url)
console.log(data.obj_list.length)
var htmlstr = '';
for (i = 0; i < data.obj_list.length; i++) {
var conf_i = data.conf_list[i] * 1
var conf_ii = conf_i.toFixed(3)
htmlstr += '<tr class="ai-finegrained-item"><td class="ai-finegrained-item-name">' + data.obj_list[i] + ": " + conf_ii + '</td><td class="ai-finegrained-item-length"><div class="ai-finegrained-item-length-inner" style="width:' + data.conf_list[i] * 100 + "% ;" + '"' + '></div></td><td class="ai-finegrained-item-degree"></td></tr>'
}
$("#img").attr("src", data.img_url)
$('#tabletab').html(htmlstr)
}, error: function (data) {
console.log("上传失败!");
}
})
});