layui：图片上传

最新推荐文章于 2025-06-13 11:57:16 发布

晓日有晶辉

最新推荐文章于 2025-06-13 11:57:16 发布

阅读量1w

点赞数 8

CC 4.0 BY-SA版权

分类专栏：组件技巧文章标签： layui

本文链接：https://blog.csdn.net/qq_47750283/article/details/119117293

组件技巧专栏收录该内容

1 篇文章

订阅专栏

本文介绍了layui的文件上传功能，包括快速入门和核心方法与基础参数。详细讲解了elem、url、data、accept等参数的用法，还提到了预览文件、拖拽上传等功能。示例代码展示了如何在前端页面实现文件上传并预览图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui文件上传

layui官网：https://www.layui.com/
layui插件下载

在这里插入图片描述

官方文档（关于文件上传）

在这里插入图片描述

快速入门

前端

1、 index页面，引入css样式和js脚本

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
</head>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/jquery.min.js}"></script>
<body>
    <h1>layui文件上传</h1>
</body>
</html>

2、文件上传的按钮

<!-- 上传图片 -->
<p>这是简单的图片上传</p>
<button type="button" class="layui-btn" id="imageUpload">
    <i class="layui-icon">&#xe67c;</i>上传图片
</button>

页面显示

在这里插入图片描述

3、 script代码

// 引入上传工具：upload
layui.use('upload', function () {
    var upload = layui.upload;  // 调用工具
    // 执行实例
    var uploadInst = upload.render({
        elem: "#imageUpload"  // 指向容器选择器，与id进行绑定
    });
})

在这里插入图片描述

核心方法与基础参数

elme

指向容器选择器，与html页面中的容器进行绑定。如：elem: “#imageUpload”，也可以是DOM对象。推荐使用id或class来直接绑定。

DOM对象

DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素。

如前面的按钮：

在这里插入图片描述

同时我们script中的写法也可为：

在这里插入图片描述

url

文件上传的一个接口。在后面的接口调用会详细讲解。

// 执行实例
var uploadInst = upload.render({
    elem: "#imageUpload",    // 指向容器选择器，与id进行绑定
    url: "" // 文件上传的接口，需要与你的后端进行交互
});

data

请求后端接口的额外参数。如：data: {id: “1”}。

data:{  // 文件上传的参数
    id: "1"
}

也可以调用 JQery的动态写法；如：data: {id: $("#id").val()}。

accept

指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）。

默认为 images。

accept: "images"

acceptMime

规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如：
acceptMime: ‘image/*’（只显示图片文件）
acceptMime: ‘image/jpg, image/png’（只显示 jpg 和 png 文件）

注：该参数为 layui 2.2.6 开始新增

acceptMime: "image/*"

在这里插入图片描述

exts

允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: ‘zip|rar|7z’ 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式。

exts: "png|jpg"

auto

是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传。

默认为true，选完文件后自动上传。

auto: false

bindAction

指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: ‘#btn’

html修改

<!-- 上传图片 -->
<p>这是简单的图片上传</p>
<button type="button" class="layui-btn" id="imageUpload">
    <i class="layui-icon">&#xe67c;</i>上传图片
</button>

<button type="button" class="layui-btn" id="upload">
    <i class="layui-icon">&#xe67c;</i>上传
</button>

script代码

bindAction: "#upload"

结果

在这里插入图片描述

field

设定文件域的字段名，默认为：file。

在这里插入图片描述

field: "imageFile"

结果

在这里插入图片描述

size

设置文件最大可允许上传的大小，单位 KB。默认为0，即不受限制。

size: 1024*5    // 文件上传大小不能超过5M

multiple

是否允许多文件上传。设置 true即可开启。默认为false 不开启。

在这里插入图片描述

注：开启后上传几个文件，它就会提交几次。

multiple: true

number

设置同时可上传的文件数量，一般配合 multiple 参数出现。默认为0，即不受限制

number: 2

drag

是否接受拖拽的文件上传，设置 false 可禁用。默认开启。

drag: true

headers

接口的请求头

headers: {
    token: "imageUplocd"
}

效果

在这里插入图片描述

回调参数

choose

选择文件后的回调函数。一般作为图片的预览。

choose: function(obj){  // 选择文件后的回调函数

}

返回值为object参数，其中obj参数包括了4个函数。

obj.pushFile()

将每次选择的文件追加到文件对列。

var pushFile = obj.pushFile();
console.log(pushFile);

结果展示

在这里插入图片描述

上传

在这里插入图片描述

会将所选中过的文件放入obj.pushFile()函数中，就算是单文件上传，它也会自动增加，并且上传的时候也会一个个遍历上传，不推荐使用。需要多文件上传请使用multiple参数。

obj.preview(function (idnex, file, result) {})

预读本地文件，如果是多文件上传，则会遍历。

idnex：得到文件索引
file：得到文件对象
result：返回文件base64编码，比如图片

<img src="" id="image">

$("#image").attr("src", result);

通过这种方式，我们可以将上传的图片展示在前端中

在这里插入图片描述

iew(function (idnex, file, result) {})

预读本地文件，如果是多文件上传，则会遍历。

idnex：得到文件索引
file：得到文件对象
result：返回文件base64编码，比如图片

<img src="" id="image">

$("#image").attr("src", result);

通过这种方式，我们可以将上传的图片展示在前端中