赞
踩
第一步我们还是先了解python flask以及ajax的基本语法
这里我就不解释基础东西了,我们直接进入正题
为防止报错,使用formdata()必须在ajax语句中加入红框配置
清空数据:使用 .empty() 保留父标签
动态插入输入:那就得用for循环了
注意三个添加方法:
$('#hello').append("<div></div>")
这个是在标签的内部添加内容,为子及
$('#hello').after("<div></div>")
这个是在标签后追加代码,为同级
$('#hello').before("<div></div>")
这个是在标签前追加代码,为同级
先来python flask部分:包含数据接收以及返回结果
# 注册 @app.route('/upload', methods=['GET', 'POST']) def upload_image(): if request.method == "POST": print("--- upload :") f = request.files['Photo'] f_name = str(uuid.uuid1()) f_path = "./static/upload/" + f_name + ".jpg" f.save(f_path) # 存到静态文件的上传文件中 # 记录上传文件的随机名称,下面通过列表获取,展示对比图片 register_fileName.append(f_path) face_id = request.form["name"] print(face_id) # 提取特征 img = cv2.imread("./static/upload/" + f_name + ".jpg") feature_list = get_face_feature(detector, recongizer, img) register_feature.append(feature_list[0]) register_ID.append(face_id) dict_app['url_register'] = "./static/upload/" + f_name + ".jpg" dict_app["id"] = "" dict_app["conf"] = "" dict_app["register_fileName"] = register_fileName dict_app["register_ID"] = register_ID # 存到数据库 db.insert(face_id, f_path, feature_list[0]) return dict_app
注:关键部
dict_app 是一个字典,我设置为全局变量
f = request.files[‘Photo’] 取出了文件
face_id = request.form[“name”] 取出了文本信息
到我们js的代码:
function upload() { var face_id = document.getElementById("face_id").value var data = new FormData() data.append("Photo", $("#upload-file")[0].files[0]) data.append("name",face_id) $.ajax({ url: "http://127.0.0.1:8080/upload", method: "post", timeOut: 1000, data: data, dataType: 'json', cache: false,//上传文件无需缓存 processData: false,//用于对data参数进行序列化处理 这里必须false contentType: false, //必须 success: function (data) { // $(document).ready(function(){ // console.log("刷新界面") // $('#hello').empty() // $("#hello").load(location.href + " #hello>*", "") // }) $('#hello').empty() $('#image_data').empty() // if(data.register_fileName.length>2)location.replace(location.href); //在服务端重新生成 console.log(data.register_fileName.length) //获取数据后应当把输入框数据清空 <input type="text" name="face_id" id="face_id"> $('#face_id').val(""); //把注册的图片加载到html对应位置 $('#url_register').attr('src', data.url_register); //把历史注册记录进行展示 let htmllet = "" console.log("data.register_fileName.length"+data.register_fileName.length) //每次加载新标签前把上次添加的标签清除 if(data.register_fileName.length>1){ // $('#hello').remove() // $('#hello').empty() console.log(data.register_fileName) var index =0 var total =0 //防止添加过长导致穿透布局 最多添加12个 for (var i = data.register_fileName.length-2; i >=0 ; i--) { if(total<12){ if(index<2){ $('#hello').append("<img style='display:inline;' src='"+data.register_fileName[i]+"' class='register-image'>") } else{ $('#hello').append("<div></div>") $('#hello').append("<img style='display:inline;' src='"+data.register_fileName[i]+"' class='register-image'>") index=0 } } $('#image_data').append("<img src="+data.register_fileName[i]+" class='register-image-data'><h3 style=' margin-bottom: 30px;'>"+data.register_ID[i]+"</h3>") index+=1 total+=1 } } }, error: function (data) { } }) }
注:
返回数据在success中,
var face_id = document.getElementById(“face_id”).value 获取的是文本信息
$(“#upload-file”)[0].files[0] 获取图片
前端的代码只展示一部分:
<form method="post" enctype="multipart/form-data">
<input type="file" name="the_file" class="u-border-none u-btn u-button-style u-palette-1-base u-btn-1"
border="none" id="upload-file">
<p class="u-text u-text-1">人物姓名:</p><input type="text" name="face_id" id="face_id">
<input type="button" class="u-border-none u-btn u-button-style u-palette-1-base u-btn-1"
onclick="upload()" value="注册">
</form>
这个是表单的;只写里面的<input 就可以了
<div id="hello">
</div>
动态加载的部分就两句就可以了,如果很会用jquery选择器的话没有也可以,我这里就写个实打实的方便看
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。