在 python flask 网页上包含单选按钮
Include radio buttons on python flask webpage
我正在尝试构建一个网页作为更大应用程序的一部分,用户可以在其中上传 csv 文件。存在三种不同类型的 csv。上传时我想对这些文件执行一些检查。一些检查是通用的,例如文件名是否存在和 .csv 扩展名。有些是特定于 csv 类型的,为此我使用 CSVValidator 包编写了一些代码。这些检查包括列名检查和数据类型检查。
在网页上,我希望用户切换单选按钮以选择要上传三种类型 he/she 中的哪一种。此选择随后可用于 select 该特定类型文件的写入验证。
现在我正在努力 'request'。由于我已经有一个上传按钮的请求,我如何为单选按钮添加一个。我还没有从单选按钮得到任何回应。请帮帮我。
目前我写的代码:
@app.route("/upload", methods=['GET', 'POST'])
def upload():
if request.method == "POST":
if request.files:
csv = request.files['csv']
if csv.filename == '':
print('CSV file must have a name')
return redirect(request.url)
if not csv_extention(csv.filename):
print('This is not a correct CSV file')
return redirect(request.url)
button = request.form['choice_csv']
if button == '1':
if check_csv_type1(filename) is False:
print('Check the errors')
print(result)
else:
filename = secure_filename(csv.filename)
csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/realised', filename))
print('CSV file saved')
return redirect(request.url)
elif button == '2':
if check_csv_type2(filename) is False:
print('Check the errors')
print(result)
else:
filename = secure_filename(csv.filename)
csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/contracts', filename))
print('CSV file saved')
return redirect(request.url)
elif button == '3':
if check_csv_type3(filename) is False:
print('Check the errors')
print(result)
else:
filename = secure_filename(csv.filename)
csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/pipeline', filename))
print('CSV file saved')
return redirect(request.url)
return render_template('public/upload_csv.html')
这是 HTML 代码:
{% extends "public/templates/public_template.html" %}
{% block title %}Upload csv{% endblock title %}
{% block main %}
<div class="container">
<!-- First row -->
<div class="row mb-4">
<h2>Upload csv files</h2>
<label>Tick the box for the kind of file you want to upload, select the month and year of the first period of data and then browse and upload.</label>
</div>
<!-- Second row, first column -->
<div class="row">
<div class="col-sm-3 col-md-4 col-lg-4 mb-4">
<form action="/upload-csv" method="POST" type="radio">
<div class="form-group">
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" value="1" id="realised" name="choice_csv">
<label class="custom-control-label" for="realised">Realised</label>
</div>
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" value="2" id="contracts" name="choice_csv">
<label class="custom-control-label" for="contracts">Contracts</label>
</div>
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" value="3" id="pipeline" name="choice_csv">
<label class="custom-control-label" for="pipeline">Pipeline</label>
</div>
</div>
</form>
</div>
<!-- Second row, second column -->
<div class="col-sm-9 col-md-6 col-lg-8 mb-4">
<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="mm-yyyy">
<input size="12" type="text" value="02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
</div>
</div>
<div class="container">
<form action="/upload-csv" method="POST", enctype="multipart/form-data">
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="csv" id="csv">
<label class="custom-file-label" for="csv">Select csv file</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Upload csv file</button>
</form>
</div>
{% endblock main %}
您的页面上目前有两个表单,除非您使用一些自定义 JS 代码在客户端收集所有 fields/items 您希望包含在请求中的所有字段都应该在相同的形式。
以这种形式为例:
<form action="/action_page" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="first_name"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="last_name"><br><br>
<input type="submit" value="Submit">
</form>
提交后,将对 /action_page
路由执行 POST 请求,并将包含两个字段:first_name
和 last_name
。
此外,虽然它不会有任何影响,但您的第一个表单有一个不正确的 type=radio
,这种属性在 input
元素上是允许的。
我建议你看看这两个页面:
我正在尝试构建一个网页作为更大应用程序的一部分,用户可以在其中上传 csv 文件。存在三种不同类型的 csv。上传时我想对这些文件执行一些检查。一些检查是通用的,例如文件名是否存在和 .csv 扩展名。有些是特定于 csv 类型的,为此我使用 CSVValidator 包编写了一些代码。这些检查包括列名检查和数据类型检查。
在网页上,我希望用户切换单选按钮以选择要上传三种类型 he/she 中的哪一种。此选择随后可用于 select 该特定类型文件的写入验证。
现在我正在努力 'request'。由于我已经有一个上传按钮的请求,我如何为单选按钮添加一个。我还没有从单选按钮得到任何回应。请帮帮我。
目前我写的代码:
@app.route("/upload", methods=['GET', 'POST'])
def upload():
if request.method == "POST":
if request.files:
csv = request.files['csv']
if csv.filename == '':
print('CSV file must have a name')
return redirect(request.url)
if not csv_extention(csv.filename):
print('This is not a correct CSV file')
return redirect(request.url)
button = request.form['choice_csv']
if button == '1':
if check_csv_type1(filename) is False:
print('Check the errors')
print(result)
else:
filename = secure_filename(csv.filename)
csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/realised', filename))
print('CSV file saved')
return redirect(request.url)
elif button == '2':
if check_csv_type2(filename) is False:
print('Check the errors')
print(result)
else:
filename = secure_filename(csv.filename)
csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/contracts', filename))
print('CSV file saved')
return redirect(request.url)
elif button == '3':
if check_csv_type3(filename) is False:
print('Check the errors')
print(result)
else:
filename = secure_filename(csv.filename)
csv.save(os.path.join(app.config['CSV_UPLOADS'] + '/pipeline', filename))
print('CSV file saved')
return redirect(request.url)
return render_template('public/upload_csv.html')
这是 HTML 代码:
{% extends "public/templates/public_template.html" %}
{% block title %}Upload csv{% endblock title %}
{% block main %}
<div class="container">
<!-- First row -->
<div class="row mb-4">
<h2>Upload csv files</h2>
<label>Tick the box for the kind of file you want to upload, select the month and year of the first period of data and then browse and upload.</label>
</div>
<!-- Second row, first column -->
<div class="row">
<div class="col-sm-3 col-md-4 col-lg-4 mb-4">
<form action="/upload-csv" method="POST" type="radio">
<div class="form-group">
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" value="1" id="realised" name="choice_csv">
<label class="custom-control-label" for="realised">Realised</label>
</div>
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" value="2" id="contracts" name="choice_csv">
<label class="custom-control-label" for="contracts">Contracts</label>
</div>
<div class="custom-control custom-radio mb-2">
<input type="radio" class="custom-control-input" value="3" id="pipeline" name="choice_csv">
<label class="custom-control-label" for="pipeline">Pipeline</label>
</div>
</div>
</form>
</div>
<!-- Second row, second column -->
<div class="col-sm-9 col-md-6 col-lg-8 mb-4">
<div class="input-append date" id="datepicker" data-date="12-02-2012" data-date-format="mm-yyyy">
<input size="12" type="text" value="02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
</div>
</div>
</div>
<div class="container">
<form action="/upload-csv" method="POST", enctype="multipart/form-data">
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input" name="csv" id="csv">
<label class="custom-file-label" for="csv">Select csv file</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Upload csv file</button>
</form>
</div>
{% endblock main %}
您的页面上目前有两个表单,除非您使用一些自定义 JS 代码在客户端收集所有 fields/items 您希望包含在请求中的所有字段都应该在相同的形式。
以这种形式为例:
<form action="/action_page" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="first_name"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="last_name"><br><br>
<input type="submit" value="Submit">
</form>
提交后,将对 /action_page
路由执行 POST 请求,并将包含两个字段:first_name
和 last_name
。
此外,虽然它不会有任何影响,但您的第一个表单有一个不正确的 type=radio
,这种属性在 input
元素上是允许的。
我建议你看看这两个页面: