layui.upload实现文件上传控制 |
您所在的位置:网站首页 › layui文件上传和表单提交 › layui.upload实现文件上传控制 |
![]() 通常情况下,我们上传文件是借助 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 条评论,人围观)参与讨论 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |