Flask 和 XMLHttpRequest 实现文件上传进度条
<h2>Flask 和 XMLHttpRequest 实现文件上传进度条</h2>
<p>在使用 Flask 构建 Web 应用时，文件上传是一项常见需求。为了提升用户体验，我们通常需要在上传过程中显示进度条。本文将介绍如何使用 Flask 和 XMLHttpRequest (XHR) 实现文件上传进度条功能。</p>
<h3>问题背景</h3>
<p>Flask 的 Python 代码运行在服务器端，而 XMLHttpRequest 是一个客户端的 JavaScript 对象，用于从浏览器异步发送 HTTP 请求。因此，我们无法直接在 Flask 代码中处理 XHR 文件上传的进度。</p>
<h3>解决方案</h3>
<p>为了实现带进度条的文件上传功能，我们需要结合使用 Python 和 JavaScript 代码:</p>
<p>**1. Python 代码 (app.py):**pythonfrom flask import Flask, render_template, request</p>
<p>app = Flask(<strong>name</strong>)</p>
<p>@app.route('/')def index(): return render_template('index.html')</p>
<p>@app.route('/upload', methods=['POST'])def upload(): if 'file' not in request.files: alert_message = 'No file selected' return ''' <script> alert('{}'); window.location.href = '/'; </script> '''.format(alert_message)</p>
<pre><code>file = request.files['file'] if file.filename == '': alert_message = 'No file selected' return ''' <script> alert('{}'); window.location.href = '/'; </script> '''.format(alert_message)
# 在这里可以处理上传的文件，比如保存到指定的目录 file.save('uploads/' + file.filename)
alert_message = 'File uploaded successfully' return ''' <script> alert('{}'); window.location.href = '/'; </script> '''.format(alert_message)
</code></pre>
<p>if <strong>name</strong> == '<strong>main</strong>': app.run(debug=True)</p>
<p>这段代码定义了两个路由：</p>
<ul>
<li><code>/</code>: 渲染 <code>index.html</code> 模板。- <code>/upload</code>: 处理文件上传请求。</li>
</ul>
<p>**2. JavaScript 代码 (upload.js):**javascriptfunction uploadFile() { var fileInput = document.getElementById('fileInput'); var file = fileInput.files[0];</p>
<pre><code>var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload');
// 跟踪上传进度 xhr.upload.onprogress = function(event) { if (event.lengthComputable) { var percentComplete = (event.loaded / event.total) * 100; console.log('Upload progress: ' + percentComplete.toFixed(2) + '%'); // 可以在这里更新进度条的显示 } };
xhr.onload = function() { if (xhr.status === 200) { console.log('File uploaded successfully'); } };
var formData = new FormData(); formData.append('file', file); xhr.send(formData);}
</code></pre>
<p>这段 JavaScript 代码定义了一个 <code>uploadFile()</code> 函数，它负责：</p>
<ul>
<li>获取用户选择的文件。- 创建一个 XMLHttpRequest 对象，并设置上传目标 URL 为 <code>/upload</code>。- 使用 <code>xhr.upload.onprogress</code> 事件监听上传进度，并在控制台输出进度信息。- 使用 <code>FormData</code> 对象将文件数据发送到服务器。</li>
</ul>
<p>**3. HTML 代码 (index.html):**html<!DOCTYPE html><html><head> <title>文件上传</title> <script src='upload.js'></script></head><body> <input type='file' id='fileInput'> <button onclick='uploadFile()'>上传</button></body></html></p>
<p>这段 HTML 代码创建了一个简单的文件上传表单，包含一个文件选择输入框和一个上传按钮。</p>
<h3>实现步骤</h3>
<ol>
<li>将上述 Python、JavaScript 和 HTML 代码分别保存为 <code>app.py</code>、<code>upload.js</code> 和 <code>index.html</code> 文件。2. 确保 <code>upload.js</code> 和 <code>index.html</code> 文件位于同一目录下。3. 运行 Flask 应用 (<code>python app.py</code>)。4. 在浏览器中访问应用地址，选择要上传的文件，并点击上传按钮。</li>
</ol>
<h3>总结</h3>
<p>本文介绍了如何使用 Flask 和 XMLHttpRequest 实现文件上传进度条功能。通过结合使用服务器端和客户端代码，我们可以轻松地为用户提供更友好的文件上传体验。</p>
原文地址: https://www.cveoy.top/t/topic/b1Xj 著作权归作者所有。请勿转载和采集!