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

演示

调试预览
布局

栅格

框架
基本元素

按钮

表单

导航 / 面包屑

基础菜单

选项卡

进度条

面板

徽章

时间线

静态表格

动画

辅助元素
组件示例

弹出层

日期与时间选择

数据表格

分页

下拉菜单

文件上传

穿梭框

树形组件

颜色选择器

滑块

评分

轮播

模板引擎

流加载

工具模块

文本行修饰

预览
查看代码
帮助

提示：以下示例的部分上传接口由第三方网站 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>

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