表单提交上传文件并反馈信息+后边增加表单提交loading效果--time.sleep(2)

return jsonify({'message': '数据上传并处理成功！'}), 200          关闭模拟框并刷新页面
return jsonify({'message': '数据上传并处理成功！'}), 400   错误不关闭


前端模版代码：
表单：
<form id="UpdateForm">
<input type="file" name="excel_update" accept=".xlsx, .xls" required>
<br><br>
<input id="uploadButton" class="btn btn-primary mt-3" type="submit" value="上传数据">
</form>
-----------------------------------------------------------------
模拟框modal形式提示信息：

<div id="responseModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="responseModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="responseModalLabel" class="modal-title">提示</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p id="modalMessage"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>



<script>
$(document).ready(function() {
$('#UpdateForm').on('submit', function(event) {
event.preventDefault(); // 防止表单默认提交

// 创建 FormData 对象
var formData = new FormData(this);

// 使用 AJAX 提交
$.ajax({
url: '/manage/nianji/update/up', // 后端路由
type: 'POST',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置 Content-Type
success: function(response) {
// 关闭主 modal
window.parent.$('#exampleModalLong-1').modal('hide');
// 设置 modal 中的消息
$('#modalMessage').text(response.message);

// 显示提示 modal
$('#responseModal').modal('show');
},
error: function(xhr) {
var message = xhr.responseJSON ? xhr.responseJSON.message : '上传失败，请重试！';
// 关闭主 modal
$('#exampleModalLong-1').modal('hide');
// 设置 modal 中的消息
$('#modalMessage').text(message);

// 显示提示 modal
$('#responseModal').modal('show');
}
});
});
// 刷新页面的设置
$('#responseModal').on('hide.bs.modal', function() {
location.reload();
});
});
</script>
---JS alertify.alert 版本----------------------------------------------------
<script>
$(document).ready(function() {
$('#UpdateForm').on('submit', function(event) {
event.preventDefault(); // 防止表单默认提交
// 创建 FormData 对象
var formData = new FormData(this);
// 使用 AJAX 提交 JSON 数据
$.ajax({
url: '/manage/nianji/update/up', // 后端路由
type: 'POST',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置 Content-Type
success: function(response) {
alertify.alert(response.message, function() {
// 关闭 modal 窗口
window.parent.$('#exampleModalLong-1').modal('hide'); // 替换为你的 modal ID
// 刷新页面
window.parent.location.reload();
});
},
error: function(xhr) {
var message = xhr.responseJSON ? xhr.responseJSON.message : '上传失败，请重试！';
alertify.alert(message); // 使用 Alertify 显示错误消息
}
});
});
});
</script>-------------------------------------------------------------------------------------------------
后端 flask:

def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1].lower() in ['xlsx', 'xls']


@manage_bp.route('/nianji/update/up/', methods=['GET', 'POST'])
@requires_manage_group(3)
def nianji_update_up():
if 'excel_update' not in request.files:
return jsonify({'message': '没有文件被上传'}), 400

file = request.files['excel_update']

if file.filename == '':
return jsonify({'message': '未选择文件'}), 400

if file and (file.filename.endswith('.xlsx') or file.filename.endswith('.xls')):
file_path = os.path.join('uploads/', file.filename)
file.save(file_path)
try:
df = pd.read_excel(file_path)
print(df)
# 在这里可以进行数据处理

return jsonify({'message': '数据上传并处理成功！'}), 200
except Exception as e:
return jsonify({'message': f'处理文件时发生错误: {str(e)}'}), 500
else:
return jsonify({'message': '文件类型不支持，只支持 .xlsx 和 .xls 文件'}), 400


loading效果表单提交
time.sleep(2) # 延时2秒
return jsonify({'message': '年级错误或数据格式错误！'}), 400
--------------------------------------------------------------------------------------------------
<!-- 添加一个用于显示提示信息的模态框 -->
<div class="modal fade bs-example-modal-center" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body text-center" style="background: #f6f6f6">
<img src="/static/images/loading.gif" width="100px" height="100px">
<br><br>数据更新可能需要几分钟时间，请不要关闭窗口....<br><br>ヾ(●´▽`●)ノ<br><br>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#UpdateForm').on('submit', function(event) {
event.preventDefault(); // 防止表单默认提交
// 显示提示信息的模态框
$('#loadingModal').modal('show');
// 创建 FormData 对象
var formData = new FormData(this);
// 添加 nianji_id 字段
formData.append('nianji_id', {{nianji_id}});
// 使用 AJAX 提交 JSON 数据
$.ajax({
url: '/manage/nianji/update/up', // 后端路由
type: 'POST',
data: formData,
processData: false, // 不处理数据
contentType: false, // 不设置 Content-Type
success: function(response) {
// 隐藏提示信息的模态框
$('#loadingModal').modal('hide');
alertify.alert(response.message, function() {
// 关闭 modal 窗口
window.parent.$('#exampleModalLong-1').modal('hide'); // 替换为你的 modal ID
// 刷新页面
window.parent.location.reload();
});
},
error: function(xhr) {
// 隐藏提示信息的模态框
$('#loadingModal').modal('hide');
var message = xhr.responseJSON ? xhr.responseJSON.message : '上传失败，请重试！';
alertify.alert(message); // 使用 Alertify 显示错误消息
}
});
});
});
</script>

本文链接：https://www.youhuilin.com/html/59.html