参考了这个链接做一个上传文件背景处理的简单的网页。 flask upload file
这个是我的源代码 20180115150241
我想完成的功能是, 点击上传文件按钮, 提交两个输入框的内容, 然后根据这个数据框的内容和提交的文件做一个对应的处理。
- 如果 python 代码里面变成 "/getsum" 会出现一个 method not allowed 的问题。
- 如果 python 代码里面使用"/", 那么整个页面的内容就被修改成返回值了。
照搬官网文档上的代码, 是可以上传文件的, 但是我需要上传文件的同时 也获取两个输入框的内容, 所以我把 '/' 变成了 '/getsum', 然后在 html 文件里面添加 jquery 做绑定。 但是现在的问题是一点击那个提交上传文件的按钮就跳出来 method not allowed 的问题, 网上找了一下说是修改成 post 方式, 这个也修改了, 还是不行麻烦大神给看下。
这个是 jquery 代码
<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>
这个是 python 代码
#@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 />
Select Language