Web+图像目标检测项目—②前端代码逻辑

前端代码逻辑

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("上传失败！");
		}
	})
});

下一篇③介绍后端处理逻辑