flask前端上传图片/文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/base.css">
<script type="text/javascript" src="/static/js/jquery-3.0.0.js"></script>
<title>Document</title>
</head>
<body>
————————————————————————————————————————————————————————————————————————————————————————————点击预测按钮，将选中的图片发送到后端，并进行识别预测————————————————————————————————————————————————————————————
<div class="page-header">
<h2>人工智能模型应用平台</h2>
</div>
<div class="panel panel-default image">
<div class="panel-heading">
<h3 class="panel-title">上传图片</h3>
</div>
<div class="panel-body">
<form action="" enctype='multipart/form-data' method='POST' class="img-form">
<input type="file" name="uploadfile" id="uploadfile" accept="image:wq/*" class="btn btn-info upload-file"/>
<div id="preview" class="preview">
<img class="imghead" id="imghead"/>
</div>
<br>
</form>
<div class="pic" role="form" id="res_pic">
<button type="button" class="btn btn-primary pre_btn" id="pre">预测</button>
<!-- {#显示结果#}-->
<div id="show_data"></div>
</div>
</div>
</div>
<script>
$(function () {
$("#imghead").click(function () {
$("#uploadfile").click();
});
$("#uploadfile").change(function () {
var files = $(this)[0].files[0];
if (files) {
var reader = new FileReader(); //调用FileReader
reader.onload = function (evt) { //读取操作完成时触发。
$("#imghead").attr('src', evt.target.result) //将img标签的src绑定为DataURL
};
reader.readAsDataURL(files); //将文件读取为 DataURL(base64)
} else {
alert("上传失败");
}
});
}); $('#pre').click(function () {
$('#show_data').empty();
var formData = new FormData;
var jqSender = $('#pre');
var value = $("#uploadfile")[0].files[0];
if (value == undefined) {
alert('请上传预测图片！');
return false;
}
formData.append('myfile', value);
var obj_name = $("#uploadfile")[0].files[0].name;
var extension = obj_name.split('.')[1].toLowerCase();
if (extension != "png" && extension != "jpg") {
alert('上传图片文件格式有误！');
return false;
}
$.ajax({
url: '/predict',
type: 'POST',
data: formData,
beforeSend: function () {
jqSender.hide().after('<img id="load" src="/static/gif/ci2.gif" />');
},
processData: false,
contentType: false,
success: function (data) {
data = JSON.parse(data);
console.log(data);
var pre_data = $("<img id='resimg' class='resimg' src='" + data.itemUrl + "'>");
$('#show_data').append(pre_data);
},
complete: function () {
$('#load').remove();
jqSender.show();
}
});
})
</script>
</body>
</html>
——————————————————————————————————————————————————————点击选择图片/文件按钮，同时将图片/文件发送到后端保存，当点击预测按钮时，从后端指定目录调取图片/文件，返回给前端显示———————————————————————————— <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/base.css">
<script type="text/javascript" src="/static/js/jquery-3.0.0.js"></script>
<title>Document</title>
</head>
<body> <div class="page-header">
<h2>人工智能模型应用平台</h2>
</div>
<div class="panel panel-default image">
<div class="panel-heading">
<h3 class="panel-title">上传图片</h3>
</div>
<div class="panel-body">
<form action="" enctype='multipart/form-data' method='POST' class="img-form">
<input type="file" name="uploadfile" id="uploadfile" accept="image:wq/*" class="btn btn-info upload-file"/>
<div id="preview" class="preview">
<img class="imghead" id="imghead"/>
</div>
<br>
</form>
<div class="pic" role="form" id="res_pic">
<button type="button" class="btn btn-primary pre_btn" id="pre">预测</button>
<!-- {#显示结果#}-->
<div id="show_data"></div>
</div>
</div> </div> <script>
$(function () {
$("#imghead").click(function () {
$("#uploadfile").click();
});
$("#uploadfile").change(function () {
var files = $(this)[0].files[0];
var formData = new FormData;
formData.append('ori_pic', files);
if (files) {
var reader = new FileReader(); //调用FileReader
reader.onload = function (evt) { //读取操作完成时触发。
$("#imghead").attr('src', evt.target.result) //将img标签的src绑定为DataURL
};
reader.readAsDataURL(files); //将文件读取为 DataURL(base64) $.ajax({
url: '/savepic',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (res) {
console.log(res)
}
}) } else {
alert("上传失败");
}
});
}); $('#pre').click(function () {
$('#show_data').empty();
$.ajax({
url: '/predict',
type: 'POST',
data: '',
beforeSend: function () {
$('#pre').hide().after('<img id="load" src="/static/gif/ci2.gif" />');
},
processData: false,
contentType: false,
success: function (data) {
data = JSON.parse(data);
if (data.ok == true){
var pre_data = $("<img id='resimg' class='resimg' src='" + data.itemUrl + "'>");
$('#show_data').append(pre_data)
}else{
alert(data.msg);
return false;
}
},
complete: function () {
$('#load').remove();
$('#pre').show();
}
})
}) </script>
</body>
</html> ##############后端
@web.route('/predict', methods=['POST'])
def predict():
'''预测视图'''
from coco import session, model
with session.as_default():
saveImgDir = current_app.config['WEB_IMG_RES']
shutil.rmtree(saveImgDir)
os.mkdir(saveImgDir)
try:
imgDirList = os.listdir(settings.UPLOAD_FOLDER)
input_path = settings.UPLOAD_FOLDER + imgDirList[0]
start = time.time()
per_img_name = DealData().predictData(input_path, saveImgDir, model)
end = time.time()
print(end - start)
shutil.rmtree(current_app.config['UPLOAD_FOLDER'])
os.mkdir(current_app.config['UPLOAD_FOLDER'])
return json.dumps({
'ok': True,
'itemUrl': current_app.config['SHOW_IMG_URL'] + per_img_name
}).encode('utf8')
except Exception as e:
msg = {'ok': False, 'msg': '请重新选取图片！'}
return json.dumps(msg)
以上内容是个人记录一下。
flask前端上传图片/文件的更多相关文章
- 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收
利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- [py]access日志入mysql-通过flask前端展示
目录 pymysql组装sql入库日志 代码组织 将入库的日志通过flask前端展示 pymysql组装sql入库日志 pymysql模块的用法 采集这些指标(metirc)都是linux环境,会用到 ...
- php上传图片文件常用的几个方法
1. 前台 <form class="add-form" method="post" action="/person/save" en ...
- 前端js文件合并三种方式
最近在思考前端js文件该如何合并,当然不包括不能合并文件,而是我们能合并的文件,想了想应该也只有三种方式. 三个方式如下: 1. 一个大文件,所有js合并成一个大文件,所有页面都引用它. 2. 各个页 ...
- [Ajax] 使用Ajax异步上传图片文件(非Form表单提交)
通过表单Form提交来上传文件的方式这里就不说了: 下面介绍,通过js中使用ajax异步上传图片文件: 新建一个html页面和一个一般处理程序即可: 涉及思路: //发送2次Ajax请求完成js异步上 ...
- js前端读写文件的方法（json、excel）
1.前端读取文件的实现 关键:利用文件上传对话框预览本地文件.利用FileReader读取文件 前端预览本地文件 <input tabindex="-1" id=" ...
- FLask上传文件
目录 Flask上传文件 改进上传 上传进度条 一个更简便的方案 Flask上传文件 文件上传的基本原理实际上很简单,基 本上是: 一个带有 enctype=multipart/form-data 的 ...
- 利用Spring MVC 上传图片文件
本文转自:http://amcucn.iteye.com/blog/264457.感谢作者 近日在工作当中,需要用到上传图片的功能,然而自己平时学习的时候只会使用struts的上传功能,但因为项目并没 ...
随机推荐
- 吴裕雄--天生自然C语言开发：作用域规则
#include <stdio.h> int main () { /* 局部变量声明 */ int a, b; int c; /* 实际初始化 */ a = ; b = ; c = a + ...
- RDS的xb文件恢复到本地mysql5.6版本数据库
参考博客: https://blog.csdn.net/a18838964650/article/details/82800621 安装qpress软件 https://www.cnblogs.co ...
- java 的ConcurrentHashMap底层数据结构
集合是编程中最常用的数据结构.而谈到并发,几乎总是离不开集合这类高级数据结构的支持.比如两个线程需要同时访问一个中间临界区(Queue),比如常会用缓存作为外部文件的副本(HashMap).这篇文章主 ...
- 《C Prime Plus》第八节笔记
第八节 字符输入/输出和输入验证 8.1 单字符I/O:getchar()和putchar() getchar()和putchar()包含在stdio.h头文件中 8.2 缓冲区 无缓冲输入: 直接回 ...
- github简单操作
配置用户名: git config --global user.name 名.姓 配置用户邮件:git config --global user.email 名.姓@avatarmind.com 查看 ...
- 吴裕雄--天生自然python学习笔记：python实现自动网页测试
Python 可实现的网页测试的功能十分强大,甚至能通 过编程来实现让绝大多数的测试过程自动化. 这对很多开 发者来说,绝对是不可多得的神器. hash lib 纽件可以判别文件是否有过更改,只需要用 ...
- Java IO: InputStreamReader和OutputStreamWriter
作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本章节将简要介绍InputStreamReader和OutputStreamWriter.细心的读者可 ...
- 关于前端使用JavaScript无法实现canvas打印问题的解决
当使用浏览器的打印功能window.print()无法打印网页上的canvas图像,但是可以通过转换canvas成一个图片的形式来实现canvas的打印. 解决方法 getElementById获取c ...
- 转-web自动化测试，定位不到元素的原因及解决方案
1.动态id定位不到元素 分析原因:每次打开页面,ID都会变化.用ID去找元素,每次刷新页面ID都会发生变化. 解决方案:推荐使用xpath的相对路径方法或者cssSelector查找到该元素. 2. ...
- java中的深拷贝
对象拷贝有时让我们忽视其重要性,又或者因为想当然而导致若干程序问题. 浅拷贝 浅拷贝即普通拷贝,即对要拷贝的对象进行复制.例如对于Entity类: class Entity{ int a; Strin ...