使用LayUI进行文件上传(多文件上传)

LayUI 同时被 2 个专栏收录
4 篇文章 0 订阅
2 篇文章 0 订阅

使用LayUI进行文件上传(多文件上传)

1、添加LayUI上传组件需要的js文件

jquery.min.js、layui.all.js、layer.js

2、导入Java上传组件包

commons-fileupload、commons-io

3、在spring中配置上传文件大小限制

<!-- 设置上传文件最大值   1M=1*1024*1024(B)=1048576 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="1048576" />
</bean>

4、jsp页面

<div class="layui-form-item">
    <label class="layui-form-label">添加附件:</label>
    <input type="hidden" id="filePath" name="filePath" />
    <div class="layui-input-inline shangc_txt">
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="testList">选择文件</button>
            <div class="layui-upload-list">
                <table class="layui-table">
                    <thead>
                    <tr><th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr></thead>
                    <tbody id="demoList"></tbody>
                </table>
            </div>
            <button type="button" class="layui-btn layui-btn-disabled" id="testListAction">开始上传</button>
        </div>
    </div>
</div>

5、js代码
在这里插入图片描述

6、java后台上传代码
参考前一篇上传博客《使用LayUI进行文件上传(带预览功能)》

效果图:
在这里插入图片描述
后记:

LayUI插件并不支持多文件上传,它的多文件上传,实际上是多次调用上传代码来实现的多文件上传。

  • 3
    点赞
  • 3
    评论
  • 5
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

评论 3 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页

打赏作者

gouyadongGYD

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值