本地环境：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，然后在列中增加文件上传按钮，如下所示：
<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，加上点击操作：
$("#submitButton").click(function () {// 构造数据var formData = new FormData();var attachList = document.getElementsByName("rowIdx");for (var x=0; x<attachList.length; x++) {// 接收前面input的细节，略// 拼接一下文件的idvar 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的idformData.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) {// 做一些处理}});
});
在后台这样写：
@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.
