在线示例 - layui

开发工具

调试预览
布局

栅格

后台布局
基本元素

按钮

表单

导航/面包屑

选项卡

进度条

面板

徽章

时间线

静态表格

动画

辅助元素
组件示例

弹出层

日期与时间选择

即时通讯

数据表格

分页

文件上传

轮播

模板引擎

流加载

工具集

代码修饰器

1.0.9:富文本编辑器

1.0.9:树形菜单

预览
查看代码
帮助

为节省服务器开销，以下示例均未配置真实上传接口，所以每次上传都会报提示：请求上传接口出现异常，这属于正常现象。

常规使用：普通图片上传

上传多张图片

预览图：

指定允许上传的文件类型

设定文件大小限制

这里以限制 60KB 为例

同时绑定多个元素，并将属性设定在元素上

选完文件后不自动上传

拖拽上传

点击上传，或将文件拖拽到此处

高级应用：制作一个多文件列表

文件名	大小	状态	操作

绑定原始文件域

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

目前暂不支持批量上传（即同时上传多个），但支持添加多个文件（即一个一个上传）