利⽤layui前端框架实现对不同⽂件夹的多⽂件上传
利⽤layui前端框架实现对不同⽂件夹的多⽂件上传
问题场景：
普通的input标签实现多⽂件上传时，只能对同⼀个⽂件夹下的多个⽂件进⾏上传，如果要同时上传两个或多个⽂件夹下的⽂件，是⽆法实现的。这篇⽂章就是利⽤layui中的插件，解决这个问题。
No file selected
前端运⽤layui
操作步骤：
1、进⼊，下载整个组件
2、下载完成后，把名字为layui的⽂件夹放到你的项⽬中进⾏引⽤
3、引⽤layui.js和layui.css实现功能
4、可点击可进⼊进⾏参考，来以上三步的前端代码实现
HTML代码块：
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal"
id="testList">选择多⽂件
</button>
<button type="button" class="layui-btn" id="testListAction"
>
开始上传
</button>
<div class="layui-upload-list col-md-12">
<table class="layui-table" >
<thead >
<tr>
<th>⽂件名</th>
<th>⼤⼩</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList"></tbody>
</table>
</div>
</div>
JS代码块
<script>
layui.use('upload', function () {
var $ = layui.jquery
, upload = layui.upload;
//多⽂件列表⽰例
var demoListView = $('#demoList')
, uploadListIns = der({
elem: '#testList'
, url: '/task_mgm/taskinfo_upload'
, accept: 'file'
前端ui框架是什么意思, multiple: true
, auto: false
, bindAction: '#testListAction'
, choose: function (obj) {
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>等待上传</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]; //删除对应的⽂件
<()[0].value = ''; //清空 input file 值，以免删除后出现同名⽂件不可选                    });
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (de == 0) { //上传成功
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span >上传成功</span>');
{#tds.eq(3).html(''); //清空操作#}
return delete this.files[index]; //删除⽂件队列已经上传成功的⽂件
}
<(index, upload);
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tds.eq(2).html('<span >上传失败</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显⽰重传
}
});
})
</script>
Python后端代码块
UPLOAD_FOLDER = 'static_files/task_mgm/'
# 设置允许上传的⽂件类型
ALLOWED_EXTENSIONS = set(
['txt', 'png', 'jpg', 'xls', 'JPG', 'PNG', 'xlsx', 'gif', 'GIF', 'ppt', 'pptx', 'doc', 'docx', 'csv', 'sql', 'py',
'rar'])
# ⽤于判断⽂件后缀
def allowed_file(filename):
return '.' in filename and filename.rsplit('.', 1)[1] in ALLOWED_EXTENSIONS
@ute('/taskinfo_upload',method=['post'])
@login_required
def taskINfo_upload_fun():
hod == 'POST':
# 上传⽂件的键名是file
if 'file' not in request.files:
logging.debugp('No file part')
return jsonify({'code': -1, 'filename':'', 'msg':'No file part'})
# 获取⽂件对象
file = request.files['file']
# 若⽤户没有选择⽂件就提交，提⽰‘No selected file’
if file.filename == '':
logging.debug('No selected file')
return jsonify({'code': -1', 'filename':'', 'msg':'No selected file'})
else:
try:
if file and allowed_file(file.filename):
origin_file_name = file.filename
logging.debug('filename is %s' % origin_file_name)
file_dir = os.path.wd(), UPLOAD_FOLDER)
if ists(file_dir):
logging.debug('%s path exist' % file_dir)
pass
else:
logging.debug('%s path not exist' % file_dir)
os.makedirs(file_dir)
file.save(os.path.join(file_dir, filename))
return jsonify({'code':0, 'filename':origin_file_name, 'msg': 'save successfully'})
else:
logging.debug('%s not allowed' % file.filename)
return jsonify({'code':-1, 'filename':'', 'msg': 'File not allowed'})
except Exception as e:
logging.debug(e)
return jsonify({'code':-1, 'filename':'', 'msg':'Error occurred'})
else:
return jsonify({'code':-1, 'filename': '', 'msg':'Method not allowed'})
下⾯简单展⽰⼀下效果图：
到此为⽌，前后端代码都有了，可以粘去直接使⽤！！！！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。