layui上传图片列表展示_Layui 图片/文件上传 - layui.upload

上传模块自 layui 2.0 的版本开始，进行了全面重写，这使得它不再那么单一，它所包含的不仅是更为强劲的功能，还有灵活的UI。任何元素都可以作为上传组件来调用，譬如按钮、图片、普通的DIV等等，而不再是一个单调的file文件域。

模块加载名称：upload

快速使用

一切从小试牛刀开始。通常情况下，我们上传文件是借助 type="file" 的 input 标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。下面是一个小示例：

上传图片

这原本只是一个普通的 button，正是 upload 模块赋予了它“文件选择”的特殊技能。当然，你还可以随意定制它的样式，而不是只局限于按钮。

upload模块快速使用 上传图片

一切看起来是那样的简单，乃至于我不得不凑一段文字来填充这一行的版面。这样好像与下文衔接起来会比较谐调的样子(自我感觉)核心方法与基础参数选项

使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象。var upload = layui.upload; //得到 upload 对象 //创建一个上传组件upload.render({elem: '#id',url: '',done: function(res, index, upload){ //上传后的回调} //,accept: 'file' //允许上传的文件类型//,size: 50 //最大允许上传的文件大小//,……})

从 layui 2.1.0 开始，允许你直接在元素上设定基础参数，如：【HTML】上传图片上传文件 【JS】upload.render({elem: '.test',done: function(res, index, upload){//获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增var item = this.item;}})

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

参数选项说明类型默认值elem指向容器选择器，如：elem: '#id'。也可以是DOM对象string/