本文作者:心月

layui.upload实现文件上传控制

心月IT博客 2019-10-20
layui.upload实现文件上传控制摘要:通常情况下,我们上传文件是借助 type= "file " 的 input 标签来完成的,但非常遗憾的是,它不能很好地与其它表单元素并存,而layui则是通过“异步上传”来实现文件上传的,即先让文件上传,再和其它表单一起提交保存。

        通常情况下,我们上传文件是借助 type="file" 的 input 标签来完成的,但非常遗憾的是,它不能很好地与其它表单元素并存,而layui则是通过“异步上传”来实现文件上传的,即先让文件上传,再和其它表单一起提交保存。

先来看看layui的图片上传小示例代码:

<!DOCTYPE html>
<html>
<head>
	<title>layui 框架使用</title>
	<link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
	<script type="text/javascript" src="/layui/layui.js"></script>

</head>
<body>
	
<button type="button" class="layui-btn" id="test1">
  <i class="layui-icon">&#xe67c;</i>上传图片
</button>
<button type="button" class="layui-btn" id="action">开始上传</button>
<script>
layui.use('upload', function(){
  var upload = layui.upload;
   
  //执行实例
  var uploadInst = upload.render({
    accept:"image"
    ,elem: '#test1' //绑定元素
    ,url: '/index.php' //上传接口
    ,done: function(res){
      //上传完毕回调
    }
    ,error: function(){
      //请求异常回调
    }
  });
});
</script>
</body>
 

</body>
</html>

文件上传成功后的返回的是json数据:

layui.upload文件上传成功后的返回数据


        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(音频)stringimages
acceptMime规定打开文件选择框时,筛选出的文件类型,值为用逗号隔开的 MIME 类型列表。如:          
acceptMime: 'image/*'(只显示图片文件)          
acceptMime: 'image/jpg, image/png'(只显示 jpg 和 png 文件)          
注:该参数为 layui 2.2.6 开始新增
stringimages
exts允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时,那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定,那么限制的就是图片的文件格式stringjpg|png|gif|bmp|jpeg
auto是否选完文件后自动上传。如果设定 false,那么需要设置 bindAction 参数来指向一个其它按钮提交上传booleantrue
bindAction指向一个按钮触发上传,一般配合 auto: false 来使用。值为选择器或DOM对象,如:bindAction: '#btn'string/object-
field设定文件域的字段名stringfile
size设置文件最大可允许上传的大小,单位 KB。不支持ie8/9number0(即不限制)
multiple是否允许多文件上传。设置 true即可开启。不支持ie8/9booleanfalse
number设置同时可上传的文件数量,一般配合 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、文件数量、文件大小等。其他的功能实现,你们可以自行体验,自由亲自动手操作才能更好的理解和掌握着些知识点。

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2019-10-20
若转载请注明原文及出处:https://www.xinyueseo.com/webfe/424.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 0 条评论,人围观)参与讨论