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的上传功能,但因为项目并没 ...
随机推荐
- 引入插件的时候 提示particlesJS is not defined
particlesJS is not defined 插件或者js文件在引入时需要注意引入顺序,每次都找很久的错误 一般引入min.js就可以,min.js意思就是压缩的js文件 引入时应该先加入 ...
- android geendao简单使用
引入依赖 implementation 'org.greenrobot:greendao:3.2.2'implementation 'com.github.yuweiguocn:GreenDaoUpg ...
- 98）PHP，文件类型获取和创建文件夹
看手册 finfo这个类:This class provides an object oriented interface into the fileinfo functions. 这个$mime_ ...
- GIL锁和进程/线程池
GIL锁 1.GIL锁 全局解释器锁,就是一个把互斥锁,将并发变成串行,同一时刻只能有一个线程使用共享资源,牺牲效率,保证数据安全,也让程序员避免自己一个个加锁,减轻开发负担 带来的问题 感觉单核处理 ...
- django框架进阶-中间件-长期维护
################## 为什么使用中间件? ####################### 先说几个需求, 1,url的白名单,url=[ "XX"] ...
- Java IO: 字符流的Piped和CharArray
作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本章节将简要介绍管道与字符数组相关的reader和writer,主要涉及PipedReader.Pip ...
- [LC] 150. Evaluate Reverse Polish Notation
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...
- [LC] 367. Valid Perfect Square
Given a positive integer num, write a function which returns True if num is a perfect square else Fa ...
- windows 不能在本地计算机启动apache2。有关更多信息，查阅系统事件日志。如果这是非Microsoft服务，请与服务厂商联系，并参考特定服务错误代码1
今天使用apache的时候又无法启动了,之前也遇到过,这次重点说这一次的情况,其他情况可以查看博主apache相关的其他博文:网上关于apache服务端的设置的很多,但是都不适合我的情况: 一般使用a ...
- 翻译：谷歌HTML、CSS和JavaScript风格规范
我喜欢浏览风格规范.他们通常有明显的规则,虽然有些有荒诞之感,但是却可以发现之前未注意到的宝石.不幸的是,鲜有公司有这个勇气来发布自己内部的风格规范.BBC 2010年时候公开其文档以及Google最 ...