有你在真好 的个人博客
贤心制作的一款简洁-优雅的图片-文件上传插件 - layui.upload
阅读:2104 添加日期:3/30/2021 5:56:20 PM

贤心制作的一款简洁、优雅的图片/文件上传插件 - 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

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

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


核心方法与基础参数选项

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

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

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

参数选项说明类型默认值
elem指向容器选择器,如:elem: '#id'。也可以是DOM对象string/object-
url服务端上传接口string-
method上传接口的 HTTP 类型stringpost

data

请求上传接口的额外参数object-
accept指定允许上传的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)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
drag是否接受拖拽的文件上传,设置 false 可禁用。不支持ie8/9booleantrue
回调


choose选择文件后的回调函数。返回一个object参数function-
function文件提交上传前的回调。返回一个object参数(同上)function-
done执行上传请求后的回调。返回三个参数,分别为:res(服务端响应信息)、index(当前文件的索引)、upload(重新上传的方法,一般在文件上传失败后使用)。function-
error执行上传请求出现异常的回调(一般为网络异常、URL 404等)。返回两个参数,分别为:index(当前文件的索引)、upload(重新上传的方法)。function-