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的上传功能,但因为项目并没 ...
随机推荐
- js - 观察者模式与订阅发布模式
零.序言 转载&参考: 1.JavaScript 设计模式系列 - 观察者模式 2.JavaScript 设计模式(六):观察者模式与发布订阅模式 一.观察者模式(observer) 概要: ...
- 方差分析||MSA/MSE|
应用统计学-方差分析 数值型数据使用线性回归来研究因素对因变量的影响.类别型数据使用方差分析来研究因素对因变量的影响.方差分析是使用方差比MSA/MSE来检验均值是否全相等,即相等是H0假设,而不全相 ...
- Linux安装完后的调优(linux 6)
1:关闭 SELinux 方法一: #sed -i 's/SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config #替换文本参数 ...
- Python类变量与实例变量及成员函数修饰方式说明(与Java定义方式进行类比)
Python类中的变量有类变量和实例变量之分. 类变量:变量绑定在类上,同一个类之间的共享变量,类比于Java中的静态变量static 公有变量定义 Java 的定义方式 class Test{ pu ...
- python 添加字符串的七种方法
#使用{}的方法 s1 = 'Hello {}! My name is {}.'.format('World', 'Python猫') print(s1) s2 = 'Hello {0} My nam ...
- navicat 导出查询结果
请依照下列步骤:(Windows 版本) 例子:导出查询结果到一个文本文件 在执行查询之后,保存查询及在工具栏点击导出向导/导出. 按照导出向导的步骤指导你完成 设置导出文件格式(步骤 1) 设置目标 ...
- mybatis参数映射
转载地址:http://iyiguo.net/blog/2012/09/27/mybatis-param-mapping-rules/ 规则 非注解参数 当参数未使用@Param注解时,可以通过以下方 ...
- 阿里巴巴-德鲁伊druid连接池配置
阿里巴巴推出的国产数据库连接池,据网上测试对比,比目前的DBCP或C3P0数据库连接池性能更好,Druid与其他数据库连接池使用方法基本一样(与DBCP非常相似),将数据库的连接信息全部配置给Data ...
- Redis 安装及入门
Redis简介 Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Docker方式安装Redis # 拉取 r ...
- drbd配置
DRBD就是网络RAID1,可以通过网络同步两个主机上的硬盘,drbd每次只允许对一个节点进行读写访问. 一.安装DRBD CentOS 6.x rpm -ivh http://www.elrepo. ...