Layui upload上传文件

一.使用layui upload模块上传文件

1.upload基本介绍

使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象

var upload = layui.upload; //得到 upload 对象//创建一个上传组件
upload.render({elem: '#id',url: '',done: function(res, index, upload){ //上传后的回调} //,accept: 'file' //允许上传的文件类型//,size: 50 //最大允许上传的文件大小//,……
})

该接口返回的相应信息（response）必须是一个标准的 JSON 格式

{"code": 0,"msg": "","data": {"src": "http://cdn.layui.com/123.jpg"}
}

2.参数介绍

参数选项	说明	类型	默认值
elem	指向容器选择器，如：elem: '#id'。也可以是DOM对象	string/object	-
elemList	列表元素对象
url	服务端上传接口，返回的数据规范请详见下文	string	-
data	请求上传接口的额外参数。如：data: {id: 'xxx'} 从 layui 2.2.6 开始，支持动态值，如: </>code data: { id: function(){ return $('#id').val(); } }	object	-
headers	接口的请求头。如：headers: {token: 'sasasas'}。注：该参数为 layui 2.2.6 开始新增
accept	指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）	string	images
acceptMime	规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如： acceptMime: 'image/'（只显示图片文件） acceptMime: 'image/jpg, image/png'*（只显示 jpg 和 png 文件）注：该参数为 layui 2.2.6 开始新增	string	images
exts	允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip\|rar\|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式	string	jpg\|png\|gif\|bmp\|jpeg
auto	是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传	boolean	true
bindAction	指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'	string/object	-
field	设定文件域的字段名	string	file
size	设置文件最大可允许上传的大小，单位 KB。不支持ie8/9	number	0（即不限制）
multiple	是否允许多文件上传。设置 true即可开启。不支持ie8/9	boolean	false
number	设置同时可上传的文件数量，一般配合 multiple 参数出现。注意：该参数为 layui 2.2.3 开始新增	number	0（即不限制）
drag	是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9	boolean	true
回调
choose	选择文件后的回调函数。返回一个object参数，详见下文	function	-
before	文件提交上传前的回调。返回一个object参数（同上），详见下文	function	-
done	执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文	function	-
error	执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。详见下文	function	-

3.html完整代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="../static/layui-v2.6.8/layui/css/layui.css"></head>
<body>
<div class="layuimini-container"><div class="layuimini-main"><fieldset class="table-search-fieldset"><legend>文件上传</legend><div style="margin: 10px 10px 10px 10px"><div class="layui-upload"><button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="testList"><i class="layui-icon layui-icon-file"></i> 选择文件 </button> <button type="button" class="layui-btn layui-btn-primary layui-border-green" id="testListAction"><i class="layui-icon layui-icon-upload"></i> 开始上传 </button><button type="button" class="layui-btn layui-btn-primary layui-border-black" id="clearList"><i class="layui-icon layui-icon-fonts-clear"></i> 清空显示 </button><div class="layui-upload-list" style="max-width: 1280px;height: auto;min-height: 600px;"><table class="layui-table"><colgroup><col><col width="150"><col width="260"><col width="260"><col width="200"></colgroup><thead><tr><th>文件名</th><th>大小</th><th>上传状态</th><th>上传进度</th><th>操作</th></tr></thead><tbody id="demoList"></tbody></table></div></div></div> </fieldset></div>
</div><script src="../static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script><script>layui.use(['upload', 'element', 'layer'], function(){var $ = layui.jquery,upload = layui.upload,element = layui.element,layer = layui.layer;//清空文件列表$('#clearList').click(function(){$('#demoList').html('');});//多文件上传var uploadListIns = upload.render({elem: '#testList'     // 选择文件按钮,elemList: $('#demoList') //列表元素对象,url: '/file-upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。,accept: 'file'  //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）,multiple: true  //是否允许多文件上传。设置 true即可开启。不支持ie8/9,number: 5   //设置同时可上传的文件数量，一般配合 multiple 参数出现; 0 不限制,auto: false  //是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传,bindAction: '#testListAction'  //指向一个按钮触发上传，一般配合 auto: false 来使用,choose: function(obj){   //选择文件后的回调函数。返回一个object参数var that = this;var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function(index, file, result){console.log(index);var tr = $(['<tr id="upload-'+ index +'">','<td>'+ file.name +'</td>','<td>'+ (file.size/1014).toFixed(1) +'kb</td>','<td>等待上传</td>','<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>','<td>','<button type="button" class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>','<button type="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 = ''; //清空 input file 值，以免删除后出现同名文件不可选});that.elemList.append(tr);element.render('progress'); //渲染新加的进度条组件});},done: function(res, index, upload){ //成功的回调var that = this;if(res.code == 0){ //上传成功var tr = that.elemList.find('tr#upload-'+ index),tds = tr.children();// tds.remove();tds.eq(2).html('<span style="color:green;">上传成功</span>') //显示上传成功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(2).html('<span style="color:red;">上传失败</span>') //显示上传成功tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传},progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比}});})
</script>
</body>
</html>

4.前端页面截图

二.后端(flask)保存上传文件

1.文件名通过方法request.files['file']或request.files.get('file')获取

注意事项:

保存文件时,请使用全路径,使用相对路径时程序报错。

2.flask代码

# encoding:utf-8
"""
@file = app
@author = zouju
@create_time = 2022-06-14- 8:59
"""from flask import Flask, render_template, jsonify, requestapp = Flask(__name__)@app.get('/')
def index():return render_template('layui-upload.html')@app.post('/file-upload')
def file_upload():file = request.files['file']project_path = r'D:\python\2022\layui\layui-flask\static\upload'file_path = project_path + '\\' + file.filenameprint('文件保存路径:', file_path)file.save(file_path)  # 保存文件return jsonify({'code': 0, 'msg': '上传成功', 'data': {'src': file_path}})if __name__ == '__main__':app.run(host='0.0.0.0', port=5000, debug=True)

三.相关截图

1.选择文件后截图

2. 点击'开始上传'后

3.文件全部上传成功

4.flask的调试信息

 * Running on http://192.168.168.83:5000/ (Press CTRL+C to quit)
192.168.168.83 - - [16/Jun/2022 11:10:07] "GET /static/layui-v2.6.8/layui/css/modules/layer/default/icon.png HTTP/1.1" 304 -
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\L202204I022.xls
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\SP-2021-10-22-11-35-19.xlsx
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\SP-2021-11-03-08-07-49.xlsx
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\离散任务令号、类别、类型定义操作指导书.doc
192.168.168.83 - - [16/Jun/2022 11:11:41] "POST /file-upload HTTP/1.1" 200 -
192.168.168.83 - - [16/Jun/2022 11:11:41] "POST /file-upload HTTP/1.1" 200 -
192.168.168.83 - - [16/Jun/2022 11:11:41] "POST /file-upload HTTP/1.1" 200 -
192.168.168.83 - - [16/Jun/2022 11:11:41] "POST /file-upload HTTP/1.1" 200 -
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\script.sql
192.168.168.83 - - [16/Jun/2022 11:11:44] "POST /file-upload HTTP/1.1" 200 -

4. 保存的文件

5.html查看返回数据

Layui upload上传文件相关推荐

layui upload上传文件时动态设置headers参数值
项目中上传文件时,需在headers中带上token,但是由于一进入页面就已经upload.render,此时如果用户没有登录,token为null,上传失败. 而且由于用户在当前页面弹框登录后,页面 ...
LayUI upload上传组件上传文件的两种方式（手动上传、自动上传）
1 手动上传上传文件分为两步,第一步选择文件,第二步上传文件. HTML代码: <input type='button' id='selectFile' value='选择文件'> &l ...
layui upload 上传无反应
upload.js中: //防止事件重复绑定 if(options.elem.data('haveEvents')) return; -- options.elem.data('haveEvents' ...
spring2.5 mvc使用注解upload上传文件
对于spring mvc来说2.0以后大量使用注解确实简单很多,最近在一个项目使用spring mvc遇到上传文件问题,由于使用了注解所以网上没有找到相关使用注解上传文件的.官方文档又没有更新都是老的 ...
Openresty(十九)使用upload上传文件
一模块地址 (1)源码解读 1) lualib/resty/upload.lua 源码2) 该模块在解析文件'上传请求'的过程中,主要采用了简单的类似"有限状态机的算法"来 ...
accept 返回0_使用Vue3.0新特性造轮子 WidgetUI3.0 （Upload上传文件组件）
我们先看看组件效果: 基本使用可选参数( icon='icon-service') props属性: title(类型 String) 组件显示的文本,默认"上传'. icon(类型 St ...
layui upload 上传大小限制
百度了很多方法都没有成功,受到upload 限制文件最大kb 启发.添加了限制最小kb.废话不多说,上代码 upload.render({ elem: '.test' ,acc ...
upload 上传文件之前判断，先判断再弹出文档选择框
如果想要点击上传按钮判断某个条件是否符合,再弹出文档选择框的效果, 不需要在Upload标签绑定before-upload事件,而是在上传Button按钮绑定事件 <Upload action= ...
layui upload上传携带额外参数
data 可以在 bofore 中追加 ,before: function(obj) { this.data = {"key1": "value"," ...

Layui upload上传文件

一.使用layui upload模块上传文件

</>code

二.后端(flask)保存上传文件

三.相关截图

Layui upload上传文件相关推荐

最新文章

热门文章