文件上传成功弹窗提示：JavaScript实现及Flask代码示例

在Web开发中，文件上传是一个常见的需求。为了提升用户体验，我们可以在文件上传成功后，使用弹窗通知用户上传结果。

本文将介绍如何使用JavaScript的'alert()'函数在文件上传成功后显示弹窗提示，并结合Flask框架提供一个完整的代码示例。

代码示例

以下代码演示了如何使用Flask处理文件上传，并在上传成功后使用JavaScript弹窗提示用户：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@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)

    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)

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

代码解释：

路由'/upload'处理文件上传请求：
- 检查请求中是否包含文件。
- 如果文件存在，则保存文件到'uploads/'目录下。
- 构造JavaScript代码，使用'alert()'函数显示上传成功提示。
- 使用'window.location.href'将页面重定向到主页'/'。
返回HTML响应：
- 包含一个'script'标签，用于执行JavaScript代码。
- 使用字符串格式化将提示信息传递给'alert()'函数。

总结

本文介绍了如何使用JavaScript的'alert()'函数在文件上传成功后显示弹窗提示，并结合Flask框架提供了一个完整的代码示例。

你可以根据自己的需求对代码进行扩展和定制，例如：

使用更美观的弹窗库替代'alert()'函数。
在弹窗中显示更详细的上传信息。
将页面重定向到其他页面。

希望本文对你有所帮助！