参考了这个链接做一个上传文件背景处理的简单的网页。 flask upload file
这个是我的源代码 20180115150241
我想完成的功能是, 点击上传文件按钮, 提交两个输入框的内容, 然后根据这个数据框的内容和提交的文件做一个对应的处理。
照搬官网文档上的代码, 是可以上传文件的, 但是我需要上传文件的同时 也获取两个输入框的内容, 所以我把 '/' 变成了 '/getsum', 然后在 html 文件里面添加 jquery 做绑定。 但是现在的问题是一点击那个提交上传文件的按钮就跳出来 method not allowed 的问题, 网上找了一下说是修改成 post 方式, 这个也修改了, 还是不行麻烦大神给看下。
<script type=text/javascript>
$(function() {
$('#getsum').click(function(){
$.ajax({
url: '/getsum',
data:{
classfy: $('#classifyitem').val(),
sumitem: $('#sumitem').val()
},
dataType: 'JSON',
type: 'POST',
success: function(data){
$("#sumresult").html(data.result);
}
});
});
});
</script>
#@app.route('/', methods=['GET', 'POST'])
# 这里我改了自己的 route getsum
@app.route('/getsum', methods=['GET', 'POST'])
def upload_file():
if request.method == 'POST':
# check if the post request has the file part
if 'file' not in request.files:
flash('No file part')
return redirect(request.url)
file = request.files['file']
# if user does not select file, browser also
# submit a empty part without filename
if file.filename == '':
flash('No selected file')
return redirect(request.url)
if file and allowed_file(file.filename):
filename = secure_filename(file.filename)
file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
return redirect(url_for('uploaded_file',
filename=filename))
return '''
<!doctype html>
<title>Upload new File</title>
<h1>Upload new File</h1>
<form method=post enctype=multipart/form-data>
<p><input type=file name=file>
<input type=submit value=Upload>
</form>
'''
这个是完整的 html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type=text/javascript>
$(function() {
$('#getsum').click(function(){
$.ajax({
url: '/getsum',
data:{
classfy: $('#classifyitem').val(),
sumitem: $('#sumitem').val()
},
dataType: 'JSON',
type: 'POST',
success: function(data){
$("#sumresult").html(data.result);
}
});
});
});
</script>
<style>
#getsum {
color: green;
}
</style>
</head>
<hr />
<h3>图片上传, 注意条目名称要完全一致</h3>
<h4>
<div><strong>分类条目(多个分类用逗号隔开):</strong> <input id="classifyitem" name="classifyitem" size="20" type="text" /></div>
</h4>
<br>
<h4>
<div><strong>求和条目(只能有一个条目):</strong> <input id="sumitem" name="sumitem" size="20" type="text" /></div>
</h4>
<!-- <h4 class="text-muted">上传需要处理的文件</h4> -->
<hr />
<form enctype="multipart/form-data" method="post"><input name="file" type="file" />
<input id="getsum" type="submit" value="上传文件并开始处理" />
<div><strong>处理完毕的文件:</strong> <span id="sumresult">等待处理</span></div>
</form>
<br />
<br />
1
woshichuanqilz OP 我的想法是用 ajax 绑定页面上的提交按钮到 /getsum, 然后在 python 代码里面配置 getsum 这个函数, 获取我需要的内容。
|
2
fiht 2018-01-15 15:48:22 +08:00
<form enctype="multipart/form-data" method="post"><input name="file" type="file" />
<input id="getsum" type="submit" value="上传文件并开始处理" /> 你的这个点击会先被 ajax 事件绑定然后还会执行一个提交表单的操作。所以 flask 的日志是下面的这样子: 127.0.0.1 - - [15/Jan/2018 15:44:55] "POST /getsum HTTP/1.1" 200 - 127.0.0.1 - - [15/Jan/2018 15:44:55] "POST / HTTP/1.1" 405 - |
3
xiaobai9927 2018-01-23 10:20:50 +08:00
我是 flask 小白,也是刚学。不懂 jquery,不过能懂题主的意思。
我觉得有两种,要么你文字内容和文件内容放在一个 form 里面,ajax 提交后,两块内容用一个 view 路由来操作保存某个地方或者保存到数据库。要么你用两个 form 提交,分别指向两个路由,然后操作数据。 不知道对不对。。。 |
4
frostming 2018-02-23 18:01:21 +08:00
既然你的 form 是用 ajax 提交到 /getsum,那 getsum 函数就只用 methods=['POST'],处理数据后返回一个 JSON object 就行了,渲染页面还是在('/')下
|