镜像站@文件/图片上传组件 - 在线演示

搜索组件模块

grid 栅格布局

layout admin 布局

color 颜色

iconfont 字体图标

font 字体大小颜色

animation 动画

button 按钮

form 表单组

input 输入框

select 下拉选择框

checkbox 复选框

switch 开关

radio 单选框

textarea 文本域

nav 导航菜单

menu 基础通用菜单

breadcrumb 面包屑

tabs 选项卡

progress 进度条

panel 面板 / card

collapse 折叠面板/手风琴

table 表格元素

badge 徽章

timeline 时间线

blockquote 引用块

fieldset 字段集

hr 分割线

layer 弹出层/弹窗综合

laydate 日期时间选择器

laypage 分页

laytpl 模板引擎

table 数据表格

form 表单模块

upload 文件/图片上传

dropdown 下拉菜单

contextmenu 右键菜单

transfer 穿梭框

tree 树形菜单

colorpicker 颜色选择器

element 常用元素操作

slider 滑块

rate 评分

carousel 轮播/跑马灯

layedit 富文本编辑器

flow 信息流/图片懒加载

util 工具集

code 代码文本行修饰

layim

layuiadmin

演示

调试预览
布局

栅格

框架
基本元素

按钮

表单

导航 / 面包屑

基础菜单

选项卡

进度条

面板

徽章

时间线

静态表格

动画

辅助元素
组件示例

弹出层

日期与时间选择

数据表格

分页

下拉菜单

文件上传

穿梭框

树形组件

颜色选择器

滑块

评分

轮播

模板引擎

流加载

工具模块

文本行修饰

预览
查看代码
帮助

提示：以下示例的部分上传接口由第三方网站 http://httpbin.org 提供，它可以模拟各类 HTTP 请求。
其他示例未配置上传接口，所以每次上传都会报「请求上传接口出现异常」的提示，这属于正常现象。

常规使用：普通图片上传

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

文件名	大小	上传进度	操作

上传多张图片

预览图：

指定允许上传的文件类型

设定文件大小限制

这里以限制 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="https://res.layui.mnorg.cn/layui/dist/css/layui.css" tppabs="http://res.layui.mnorg.cn/layui/dist/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

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