欢迎访问宙启技术站
智能推送
最新文章

PythonFlask-WTF文件上传进度条展示

发布时间：2023-12-11 06:19:11

Flask-WTF是使用Python语言编写的一个基于Flask框架的Web表单处理扩展，它提供了一组简单而强大的功能，可以帮助我们快速创建和处理表单。

文件上传是Web开发中常见的功能之一，但在上传大文件或者网络情况不好的情况下，用户可能会等待较长的时间才能完成文件上传。为了提升用户体验，我们可以使用进度条来展示文件上传的进度，让用户清楚地知道文件上传的进度。

下面将介绍如何使用Flask-WTF来展示文件上传的进度条。

首先，我们需要安装Flask-WTF库。可以使用以下命令进行安装：

pip install flask-wtf

接下来，我们需要创建一个Flask应用。在app.py文件中编写以下代码：

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import FileField, SubmitField
from werkzeug.utils import secure_filename
import os
import time

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret_key'

class UploadForm(FlaskForm):
    file = FileField('File')
    submit = SubmitField('Upload')

@app.route('/', methods=['GET', 'POST'])
def upload():
    form = UploadForm()
    if form.validate_on_submit():
        file = form.file.data
        filename = secure_filename(file.filename)
        file.save(os.path.join('upload', filename))
        return 'File uploaded successfully!'

    return render_template('upload.html', form=form)

if __name__ == '__main__':
    app.run()

在上面的代码中，我们首先导入了Flask、render_template和request模块，以及FlaskForm、FileField和SubmitField类。然后，我们创建了一个Flask应用，并设置了一个密钥。我们还定义了一个表单类UploadForm，其中包含一个FileField字段和一个SubmitField按钮。在路由函数中，我们实例化了这个表单类，并在GET请求时渲染了一个模板。在POST请求时，我们获取文件对象并保存在一个名为'upload'的文件夹中。

接下来，我们需要创建upload.html模板。在templates文件夹中创建一个名为upload.html的文件，并编写以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>File Upload Progress</title>
</head>
<body>
<form method="POST" enctype="multipart/form-data" action="{{ url_for('upload') }}">
    {{ form.csrf_token }}
    {{ form.file.label }}
    {{ form.file }}
    {{ form.submit }}
</form>
</body>
</html>

在上面的代码中，我们使用了Flask-WTF提供的模板渲染功能。我们在表单的头部部分使用了csrf_token字段，以防止CSRF攻击。然后，我们在表单中显示了FileField字段和SubmitField按钮。

在文件上传的过程中，我们需要通过JavaScript代码来监听文件上传的进度，并通过AJAX请求将进度传递到后台。下面是一个实现进度条功能的JavaScript代码：

function uploadFile() {
  var form = $('form')[0];
  var formData = new FormData(form);

  $.ajax({
    url: '/upload',
    type: 'POST',
    data: formData,
    beforeSend: function() {
      // 显示进度条
      $('#progress').show();
    },
    xhr: function() {
      var xhr = new window.XMLHttpRequest();
      xhr.upload.addEventListener('progress', function(evt) {
        if (evt.lengthComputable) {
          var percentComplete = evt.loaded / evt.total * 100;
          $('#progress-bar').width(percentComplete + '%');
        }
      }, false);
      return xhr;
    },
    success: function(res) {
      // 文件上传成功
      alert(res);
    },
    error: function(err) {
      // 文件上传失败
      alert('File upload failed!');
    },
    complete: function() {
      // 上传完成，隐藏进度条
      $('#progress').hide();
    },
    cache: false,
    contentType: false,
    processData: false
  });
}

$('form').submit(function(e) {
  e.preventDefault();
  uploadFile();
});

上面的代码中，我们首先获取了表单以及表单的数据，然后通过AJAX请求将数据传递到后台。在xhr对象的upload属性中，我们监听了progress事件，并根据已经上传的数据量和总数据量来计算上传的百分比，然后设置进度条的宽度。在请求开始和完成后，我们分别显示和隐藏进度条。

最后，我们需要在upload.html模板中添加进度条的HTML代码。修改upload.html文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>File Upload Progress</title>
    <style type="text/css">
        #progress {
          width: 100%;
          height: 20px;
          background-color: #f0f0f0;
          display: none;
        }

        #progress-bar {
          height: 100%;
          background-color: #008000;
        }
    </style>
</head>
<body>
<form method="POST" enctype="multipart/form-data" action="{{ url_for('upload') }}">
    {{ form.csrf_token }}
    {{ form.file.label }}
    {{ form.file }}
    {{ form.submit }}
</form>

<div id="progress">
  <div id="progress-bar"></div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
<script src="static/js/upload.js"></script>
</body>
</html>

在上面的代码中，我们添加了一些CSS样式来定义进度条的外观。然后在表单的下方添加了一个div，用于显示进度条，并在底部引入了jQuery和我们编写的JavaScript代码。

通过运行以上代码，我们可以看到一个简单的文件上传表单，用户选择文件后，点击上传按钮，文件将会被上传到服务器，并在上传过程中显示进度条。

总结：在本文中，我们介绍了如何使用Flask-WTF来展示文件上传的进度条。通过使用Flask-WTF提供的功能，我们可以轻松地创建并处理表单。同时，通过使用JavaScript代码，我们可以监听文件上传的进度，并通过AJAX请求将进度传递到后台，以展示上传的进度条。

希望本文对你学习如何展示文件上传的进度条有所帮助！