Question

我正在使用Flask开发Web应用程序。我想在主页面中放置一个表单，允许用户上传文件并提交给服务器。

这是有效的：

  <div class="jumbotron">
    <div class="container">
      <h1>Automatic Guitar Music Transcription</h1>
    </div>
  </div>
  <div class="container">
    <p class="lead">Upload your audio file below:</p>
    <form method="POST" action="/" enctype="multipart/form-data">
      <input name="file" type="file"/>
      <input type="submit"/>
    </form>
  </div>

（JSFiddle）

但是，我的真实index.html是Flask模板，也使用Bootstrap。

{%- extends "base.html" %}

{% import "bootstrap/utils.html" as utils %}

{% block content %}
  {% if request == "GET": %}

  <div class="jumbotron">
    <div class="container">
      <h1>Automatic Guitar Music Transcription</h1>
    </div>
  </div>
  <div class="container">
    <p class="lead">Upload your audio file below:</p>
    <form method="POST" action="/" enctype="multipart/form-data">
      <input name="file" type="file"/>
      <input type="submit"/>
    </form>
  </div>

  ...more HTML...

  {% endif %}
{% endblock %}

{% block scripts %}
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
  <script src="https://rawgit.com/mattdiamond/Recorderjs/master/dist/recorder.js"></script>
  <script src="{{url_for('static', filename='js/record.js')}}"></script>
{% endblock %}

不幸的是，这样，我没有像JSFiddle那样并排获得输入按钮，但是我在文件上传按钮下面得到了提交按钮：

为什么会这样？感谢。

Answer 1

使用简单的表来实现此目的：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">

<h:body>
    <h:inputText id="counter">
        <p:ajax update="out" listener="#{counterBean.increment}" />
    </h:inputText>
    <h:outputText id="out" value="#{counterBean.count}" />
</h:body>
</html>

并排输入表单 - HTML，Flask

1 个答案: