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的上传功能,但因为项目并没 ...
随机推荐
- android studio 通过界面快速查看md5
https://www.jianshu.com/p/989c0be557f0
- iOS动画效果合集、飞吧企鹅游戏、换肤方案、画板、文字效果等源码
iOS精选源码 动画知识运用及常见动画效果收集 3D卡片拖拽卡片叠加卡片 iFIERO - FLYING PENGUIN 飞吧企鹅SpriteKit游戏(源码) Swift封装的空数据提醒界面Empt ...
- Horizon公司环境
- Session深入浅出
Session会在浏览器关闭后消失吗? 通常情况下,当我们关闭浏览器再重新打开后,我们就需要再次进行登陆(如果没有进行下次自动登录之类的设置).在Jav中(Session是通用的,这里以Java为例) ...
- Node.js知识点详解（一）基础部分
转自:http://segmentfault.com/a/1190000000728401 模块 Node.js 提供了exports 和 require 两个对象,其中 exports 是模块公开的 ...
- 为什么说iPhone无望恢复中国市场？
直到现在还记得,iPhone 4在国内当时引发的追捧狂潮.彼时iPhone 4绝对是一机难求,上至土豪下至学生都以拥有iPhone 4为荣.发售接近一年后仍然需要加价,价格动辄达到七八千元,真正成为了 ...
- 启动Tomcat报WEB-INF\lib\j2ee.jar jar not loaded异常的解决办法
今天加载工程时突然发现Tomcat报: 2010-7-1 12:11:38 org.apache.catalina.loader.WebappClassLoader validateJarFile 信 ...
- bubble chart|Matrix Scatter|Overlay Scatter|Scatterplots|drop-line|box plot|Stem-and-leaf plot|Histogram|Bar chart|Pareto chart|Pie chart|doughnut chart|
应用统计学 对类别数据要分类处理: Bar chart复式条形图便于对比: Pareto chart:对类别变量依据频数高低排列: Pie chart:饼图用于一个样本,可以区分类别数据 doughn ...
- mysql报错2003 ，can't connect to mysql server on “localhost”
我在安装成功后启动MySQL服务时,服务启动不了,提示:MySQL服务无法启动 服务没有报告任何错误 请键入NET HELPMSG 3534 以获得更多帮助,如下: 解决方案:安装好MySQL后 ...
- 在腾讯云服务器上安装JDK+Tomcat并启动tomcat
由于Java web项目需要使用到tomcat所以决定在腾讯云服务器(centos7.X)上安装JDK和tomcat,来部署我们的项目. 准备工具: 云服务器:centos7.x+ 本地连接服务器:X ...