通常情况下，我们上传文件是借助 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"></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模块，然后点击绑定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（音频） | 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 | - |
layui的默认文件上传是自动上传的，即：把文件拖到上传元素后图片立刻上传，如果还有其他的信息需要一起上传，不想让文件拖过来后立马上传，可以通过把 auto 参数的值设为 false 来关闭自动上传。
通过layui.upload的参数表可以看到，layui.upload可以实现各种文件上传，比如文件类型、token、文件数量、文件大小等。其他的功能实现，你们可以自行体验，自由亲自动手操作才能更好的理解和掌握着些知识点。