flask+layui实现前后端文件传输
<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>上传进度</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
<button type="button" class="layui-btn" id="testListAction">开始上传</button>
<script>
layui.use(['upload', 'element', 'layer'], function () {
var $ = layui.jquery,
form = layui.form,
var uploadListIns = upload.render({
elem: '#testList'
,elemList: $('#demoList')
,url: '/test'
,accept: 'file'
,multiple: true
,number: 3
,auto: false
,bindAction: '#testListAction'
,choose: function(obj){
var that = this;
var files = this.files = obj.pushFile();
obj.preview(function(index, file, result){
var tr = $(['<tr id="upload-'+ index +'">'
,'<td>'+ file.name +'</td>'
,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
,'<td>'
,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
,'</td>'
,'</tr>'].join(''));
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
tr.find('.demo-delete').on('click', function(){
delete files[index];
tr.remove();
uploadListIns.config.elem.next()[0].value = '';
});
that.elemList.append(tr);
element.render('progress');
});
}
,done: function(res, index, upload){
var that = this;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).html('');
delete this.files[index];
return;
this.error(index, upload);
}
,allDone: function(obj){
console.log(obj)
}
,error: function(index, upload){
var that = this;
var tr = that.elemList.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(3).find('.demo-reload').removeClass('layui-hide');
}
,progress: function(n, elem, e, index){
element.progress('progress-demo-'+ index, n + '%');
}
});
});
</script>
from flask import Flask
app = Flask(import_name=__name__)
@app.route('test', methods=['GET', 'POST'])
def test():
f = request.files.get("file")
f.save('./{}'.format(f.filename))
return {'flag': True}