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

使用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插件并不支持多文件上传，它的多文件上传，实际上是多次调用上传代码来实现的多文件上传。