在 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_namelast_name

此外,虽然它不会有任何影响,但您的第一个表单有一个不正确的 type=radio,这种属性在 input 元素上是允许的。

我建议你看看这两个页面: