python-flask-上传多个文件并存储

本地环境:win10 / centos6 , python3


flask入门看这里:

python-flask结合bootstrap实现网页小工具实例-半小时速通版_bootstrap flask-CSDN博客

https://blog.csdn.net/pxy7896/article/details/137854455

动态添加和删除表格中的行,看这里:

javascript-动态增加和删除表格的行-CSDN博客

https://blog.csdn.net/pxy7896/article/details/141030235


问题描述

在前台上传1~N个文件,后台接收并存储。

实现效果

点击"添加峰图"按钮,可以不断加行:

实际的html内容类似:

后台则需要接收这些附件(前一个input也要)。

解决方案

在前台构建一个form,在里面放一个table,然后在列中增加文件上传按钮,如下所示:

html 复制代码
<form action="run_command_ab1" id="main_form" >
	<div id="suborderlist" class="row col-md-12">
		<table>
			<!-- 略去一些内容 -->
			<!-- 这是编号 -->
			<td name="rowIdx" style="width:10%;"></td>
			<td style="width:40%;">
				<input name="attach" type="file" id="customFile">
            </td>
		</table>
</form>

提交按钮的id是submitButton,加上点击操作:

javascript 复制代码
$("#submitButton").click(function () {
	// 构造数据
	var formData = new FormData();
	var attachList = document.getElementsByName("rowIdx");
    for (var x=0; x<attachList.length; x++) {
    	// 接收前面input的细节,略
		// 拼接一下文件的id
		var idx = "attach." + attachList[x].innerText.toString();
    	var attachFile = document.getElementById(idx).files[0];
    	if (attachFile == null) {
			// 处理空文件
    		var blob = new Blob([], {type: "text/plain;charset=utf-8"});
    		formData.append("subAttach", blob);
    	} else {
    		formData.append("subAttach", attachFile);
    	}
    }
    // 剩余数据
    // 这里main_form是当前整个form的id
	formData.append("ab1Order", $("#main_form").serialize());
    $.ajax({
        type: 'POST',
        url: "/run_command_ab1",
        data: formData,
		processData: false, // jQuery不要处理发送的数据
        contentType: false, // jQuery不要设置Content-Type请求头
        success: function (resp) {
			// 做一些处理
		}
    });
});

在后台这样写:

python 复制代码
@app.route('/run_command_ab1', methods=['POST'])
def run_command_ab1():
    if request.method == 'POST':
        #print(request.form) 
        # ImmutableMultiDict([('ab1Order', 'sampleId=test&target=313&target=21&target=')])
        # 所以这样提取信息
        info = request.form['ab1Order']
        
        #print(request.files)
        # ImmutableMultiDict([('subAttach', <FileStorage: 'xxx.ab1' ('application/octet-stream')>)])
        # 这样获取文件列表
        files = request.files.getlist('subAttach')
        # 遍历
        for f in files:
            f.save("/this/is/the/path/" + f.filename)
        return '文件已上传成功!'

END.

相关推荐
李游Leo16 分钟前
JavaScript事件机制与性能优化:防抖 / 节流 / 事件委托 / Passive Event Listeners 全解析
开发语言·javascript·性能优化
JJJJ_iii1 小时前
【左程云算法09】栈的入门题目-最小栈
java·开发语言·数据结构·算法·时间复杂度
枫叶丹41 小时前
【Qt开发】显示类控件(三)-> QProgressBar
开发语言·qt
三体世界1 小时前
测试用例全解析:从入门到精通(1)
linux·c语言·c++·python·功能测试·测试用例·测试覆盖率
Python私教1 小时前
Django全栈班v1.04 Python基础语法 20250912 下午
后端·python·django
Bear on Toilet1 小时前
继承类模板:函数未在模板定义上下文中声明,只能通过实例化上下文中参数相关的查找找到
开发语言·javascript·c++·算法·继承
xchenhao1 小时前
Scikit-Learn 对糖尿病数据集(回归任务)进行全面分析
python·机器学习·回归·数据集·scikit-learn·特征·svm
xchenhao1 小时前
Scikit-learn 对加州房价数据集(回归任务)进行全面分析
python·决策树·机器学习·回归·数据集·scikit-learn·knn
这里有鱼汤1 小时前
发现一个高性能回测框架,Python + Rust,比 backtrader 快 250 倍?小团队必备!
后端·python
☼←安于亥时→❦1 小时前
数据分析之Pandas入门小结
python·pandas