ssm框架和layui实现上传功能

最新推荐文章于 2023-11-25 14:25:09 发布

emu_ume

最新推荐文章于 2023-11-25 14:25:09 发布

阅读量2.2k

点赞数 1

分类专栏：项目中使用的技术

本文链接：https://blog.csdn.net/weixin_41929877/article/details/80188149

版权

本文介绍了如何使用SSM框架和LayUI前端组件在Web应用中实现文件上传功能。前端通过LayUI的上传模块实现文件选择和预览，通过按钮触发多文件上传，同时在上传前获取额外数据。后端使用SpringMVC配置文件上传解析器，并在Controller层接收上传的文件和额外参数。

摘要由CSDN通过智能技术生成

前端：

引入js和css

按钮：

<i class="layui-icon"></i>选择文件

</button>

<button type="button" class="layui-btn" id="manyPicUpload">
<i class="layui-icon"></i>开始上传

</button>

js部分：注：多问健上传实际上是在前端单文件循环上传

    /*上传下载js*/
       layui.use('upload',function() {
                   var $ = layui.jquery, upload = layui.upload;

                   //图片上传
                   upload.render({
                   elem : '#test2',
                   url : 'pic/upload',
                   multiple : false,
                   auto : false,
                   bindAction : '#1vnupload',
                   before : function(obj) {
                               //预读本地文件示例，不支持ie8
                               obj.preview(function(index,file, result) {
                                       $('#1vNCompare').empty();
                                       $('#1vNCompare').append('<div class="thumbnail text-overflow" style="text-align: center;">'
                                                               + '<img src="' + result + '" />'
                                                               + '<h3>'
                                                               + "原始图片"