贤心制作的一款简洁、优雅的图片/文件上传插件 - layui.upload（让上传更优雅）

介绍

layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为PC端后台系统与前台界面的速成开发方案。上传模块自 layui 2.0 的版本开始，进行了全面重写，这使得它不再那么单一，它所包含的不仅是更为强劲的功能，还有灵活的UI。任何元素都可以作为上传组件来调用，譬如按钮、图片、普通的DIV等等，而不再是一个单调的file文件域。

代码修饰器加载layui upload模块

下载

layui：http://www.layui.com/

文档：http://www.layui.com/doc/

layui.upload:http://www.layui.com/doc/modules/upload.html

可以在layui官网首页下载layui最新版，

npm安装

贤心制作的一款简洁、优雅的图片/文件上传插件 - layui.upload

git仓库下载

你也可以通过 GitHub 或码云得到 layui 的完整开发包

引入

贤心制作的一款简洁、优雅的图片/文件上传插件 - layui.upload

小试牛刀

将以下代码放入对应html页面即可

这原本知识一个普通的button，正式upload模块赋予了它"文件选择"功能，当然，我们还可随意定义它的样式，而不只是局限于按钮

贤心制作的一款简洁、优雅的图片/文件上传插件 - layui.upload

核心方法与基础参数选项

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

正如上面例子中ele、accept、exts、size等等

更多支持的参数详见下表，合理的配置它们，应对各式各样的业务需求。

参数选项	说明	类型	默认值
elem	指向容器选择器，如：elem: '#id'。也可以是DOM对象	string/object	-
url	服务端上传接口	string	-
method	上传接口的 HTTP 类型	string	post
data	请求上传接口的额外参数	object	-
accept	指定允许上传的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）	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
drag	是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9	boolean	true
回调
choose	选择文件后的回调函数。返回一个object参数	function	-
function	文件提交上传前的回调。返回一个object参数（同上）	function	-
done	执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。	function	-
error	执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。	function	-