layui.upload实现文件上传控制 |
您所在的位置：网站首页 › layui表单提交数据后返回 › layui.upload实现文件上传控制 |
layui.upload实现文件上传控制
layui.upload实现文件上传控制
心月IT博客
10-20
默认
通常情况下，我们上传文件是借助 type="file" 的 input 标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，而layui则是通过“异步上传”来实现文件上传的，即先让文件上传，再和其它表单一起提交保存。 先来看看layui的图片上传小示例代码： layui 框架使用 上传图片 开始上传 layui.use('upload', function(){ var upload = layui.upload; //执行实例 var uploadInst = upload.render({ accept:"image" ,elem: '#test1' //绑定元素 ,url: '/index.php' //上传接口 ,done: function(res){ //上传完毕回调 } ,error: function(){ //请求异常回调 } }); });文件上传成功后的返回的是json数据：
layui实现图片上传需要给元素绑定upload模块，然后点击绑定upload的元素来选择上传图片，或者将需要上传的图片直接拖到绑定upload的元素上就可以实现上传图片。不过，因为layui.upload是异步上传，因此还需要指定上传图片的接口，否则是无法上传图片的。 layui.upload的参数列表 参数选项说明类型默认值elem指向容器选择器，如：elem: '#id'。也可以是DOM对象string/object-url服务端上传接口，返回的数据规范请详见下文string-data 请求上传接口的额外参数。如：data: {id: 'xxx'} 从 layui 2.2.6 开始，支持动态值，如:codelayui.codedata: {id: function(){return $('#id').val();}}object-headers接口的请求头。如：headers: {token: 'sasasas'}。注：该参数为 layui 2.2.6 开始新增accept指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）stringimagesacceptMime规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如： acceptMime: 'image/*'（只显示图片文件） acceptMime: 'image/jpg, image/png'（只显示 jpg 和 png 文件） 注：该参数为 layui 2.2.6 开始新增stringimagesexts允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式stringjpg|png|gif|bmp|jpegauto是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传booleantruebindAction指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'string/object-field设定文件域的字段名stringfilesize设置文件最大可允许上传的大小，单位 KB。不支持ie8/9number0（即不限制）multiple是否允许多文件上传。设置 true即可开启。不支持ie8/9booleanfalsenumber设置同时可上传的文件数量，一般配合 multiple 参数出现。注意：该参数为 layui 2.2.3 开始新增number0（即不限制）drag是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9booleantrue回调choose选择文件后的回调函数。返回一个object参数，详见下文function-before文件提交上传前的回调。返回一个object参数（同上），详见下文function-done执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文function-error执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。详见下文function-layui的默认文件上传是自动上传的，即：把文件拖到上传元素后图片立刻上传，如果还有其他的信息需要一起上传，不想让文件拖过来后立马上传，可以通过把 auto 参数的值设为 false 来关闭自动上传。 通过layui.upload的参数表可以看到，layui.upload可以实现各种文件上传，比如文件类型、token、文件数量、文件大小等。其他的功能实现，你们可以自行体验，自由亲自动手操作才能更好的理解和掌握着些知识点。 标签： 文件上传 layui.upload 文章版权及转载声明：本文由 心月IT技术博客 博主整理于 10-20 若转载请注明原文及出处：https://www.xinyueseo.com/webfe/424.html 分享到： 赞（） 相关推荐 文件上传 发表评论 评论列表 （有 0 条评论，人围观）参与讨论 |
【本文地址】
今日新闻 |
推荐新闻 |