在 python 烧瓶网页上包含单选按钮

Question

我正在尝试构建一个网页作为更大应用程序的一部分，用户可以在其中上传 csv 文件。存在三种不同类型的 csv。在上传时，我想对这些文件进行一些检查。一些检查是通用的，例如文件名是否存在和 .csv 扩展名。有些是特定于 csv 类型的，为此我使用 CSVValidator 包编写了一些代码。这些检查包括列名检查和数据类型检查。

在网页上，我希望用户切换一个单选按钮来选择他/她要上传的三种类型中的哪一种。然后可以使用此选项为该特定类型的文件选择写入验证。

现在我正在为“请求”而苦苦挣扎。由于我已经有一个上传按钮的请求，我如何为单选按钮添加一个。我还没有从单选按钮得到任何响应。请帮帮我。

到目前为止我写的代码：

@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 %}

Answer 1

您的页面上目前有两个表单，除非您使用一些自定义 JS 代码在客户端收集所有字段/项目，否则您希望包含在请求中的所有字段都应该采用相同的表单。

以这种形式为例：

<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 元素上是允许的。

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

• MDN Web Docs - : The Input (Form Input) element
• MDN Web Docs - Web forms — Working with user data