精华内容
下载资源
问答
  • 2021-03-01 06:16:10

    本文对接上篇文章《 layui.js实现多文件上传前端html写法总结》,后台和前端html的url的对应及相关参数可参考此文章

    此功能实现所用的框架为springboot

    代码如下:

    @ResponseBody

    @RequestMapping({"/demp/model/uploadAreaFile.do"})

    public JSONObject uploadAreaFile(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request) throws Exception {

    String schoolId = request.getParameter("schoolId");//获取参数

    Mapresult = new HashMap();

    try{

    //上传文件方法,这里需要改成自己项目里上传文件方法

    String filePath = FileUploadUtil.uploadFile(file, Const.MODEL_FILE_TYPE);

    result.put("code", 0);

    result.put("msg", "上传成功");

    result.put("filePath", filePath);

    return JSONObject.fromObject(result);

    }catch(Exception e){

    result.put("code", -1);

    result.put("msg", "上传失败");

    result.put("filePath", "");

    return JSONObject.fromObject(result);

    }

    }

    最开始实现这个功能遇到几个问题,现总结下来:

    1.程序不会到后台,页面一直报接口上报异常,查了下主要是两个原因:

    (1)此处的返回值要是json格式的,像本文中返回JSONObject 或 Map都是可以的,此处要注意,返回值不能是json格式的字符串。

    (2)按照(1)改了之后发现还是不可以,后来查资料发现,方法前要引入注解@ResponseBody

    按照上面2个步骤改了之后,发现程序成功进入后台

    @ResponseBody的原理可参考《浅析@ResponseBody注解作用和原理》,《layUI框架中文件上传前后端交互及遇到的相关问题》

    2.关于大于1M的文件后台接口报异常不是因为layui控件的问题,应该是对应项目框架的原因,因为本人用的框架为springboot,查询资料后在项目对应的application.properties文件里加下面两行代码就可以了

    spring.http.multipart.maxFileSize=100Mb

    spring.http.multipart.maxRequestSize=500Mb

    maxFileSize 是单个文件大小,maxRequestSize是设置总上传的数据大小,单位根据自己需求定义,Mb和Kb都可以

    3.按照上面方法即layui上传文件后台获取的file参数为null,而且参数也传不过去,最后找到了原因,因为本人用的是springboot框架,发现启动项目类里多了这样一段注解:@EnableAutoConfiguration(exclude = {MultipartAutoConfiguration.class}),就是因为这个导致的原因,去了注解之后就没有这两个问题了,如果不去的话可以通过下面的方式获取file,但是参数还是没有找到方法传到后台。

    @ResponseBody

    @RequestMapping({"/demp/model/uploadAreaFile.do"})

    public JSONObject uploadAreaFile(@RequestParam(value = "file", required = false) MultipartFile file, HttpServletRequest request) throws Exception {

    //通过下面的方法获取file

    MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext());

    MultipartHttpServletRequest multipartRequest = resolver.resolveMultipart(request);

    file = multipartRequest.getFile("file");

    String schoolId = request.getParameter("schoolId");//获取参数

    Mapresult = new HashMap();

    try{

    //上传文件方法,这里需要改成自己项目里上传文件方法

    String filePath = FileUploadUtil.uploadFile(file, Const.MODEL_FILE_TYPE);

    result.put("code", 0);

    result.put("msg", "上传成功");

    result.put("filePath", filePath);

    return JSONObject.fromObject(result);

    }catch(Exception e){

    result.put("code", -1);

    result.put("msg", "上传失败");

    result.put("filePath", "");

    return JSONObject.fromObject(result);

    }

    }

    更多相关内容
  • 该代码完整的实现了shiyonglayui技术实现多文件上传预览和删除功能,下载下来直接导入到开发工具中就可以使用
  • 今天小编就为大家分享一篇layui 实现表单和文件上传一起传到后台的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作,结合实例形式分析了layui框架结合thinkPHP进行文件上传与处理操作相关实现技巧,需要的朋友可以参考下
  • 基于layui文件上传,支持支持实时进度条,拖拽上传,单文件,多文件上传,因为大多参数支持在ie89下使用,所以推荐ie10+,另外url一定要填后台真实上传路径测试
  • layUI实现多文件上传

    千次阅读 2021-06-07 12:10:23
    } ,allDone: function(obj){ //多文件上传完毕后的状态回调 console.log(obj) } ,error: function(index, upload){ //错误回调 var that = this; var tr = that.elemList.find('tr#upload-'+ index) ,tds = tr....

    前端:

    <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title>layPage快速使用</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="/layui/css/layui.css">
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        </head>
        <body>
    
            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
                <div class="layui-upload-list" style="max-width: 1000px;">
                    <table class="layui-table">
                        <colgroup>
                            <col>
                            <col width="150">
                            <col width="260">
                            <col width="150">
                        </colgroup>
                        <thead>
                        <tr><th>文件名</th>
                            <th>大小</th>
                            <th>上传进度</th>
                            <th>操作</th>
                        </tr></thead>
                        <tbody id="demoList"></tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="testListAction">开始上传</button>
            </div>
    
    
    
            <script src="/layui/layui.js"></script>
            <script>
                layui.use(['upload', 'element', 'layer'], function(){
    
                    var upload = layui.upload;
                    //演示多文件列表
                    upload.render({
                        elem: '#testList'
                        ,elemList: $('#demoList') //列表元素对象
                        ,url: '/upload/file'
                        ,accept: 'file'
                        ,multiple: false
                        ,number: 3
                        ,auto: false
                        ,bindAction: '#testListAction'
                        ,accept: "images|file|video|audio"
                        ,exts: 'jpg|png|gif|bmp|jpeg|zip|rar|7z|pdf|doc|docx|xls|xlsx|avi|mp4|rmvb|wmv|txt|pub|pptx|ppt'
                        ,choose: function(obj){
                            var that = this;
                            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                            //读取本地文件
                            obj.preview(function(index, file, result){
                                var tr = $(['<tr id="upload-'+ index +'">'
                                    ,'<td>'+ file.name +'</td>'
                                    ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                                    ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                                    ,'<td>'
                                    ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                                    ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                                    ,'</td>'
                                    ,'</tr>'].join(''));
    
                                //单个重传
                                tr.find('.demo-reload').on('click', function(){
                                    obj.upload(index, file);
                                });
    
                                //删除
                                tr.find('.demo-delete').on('click', function(){
                                    delete files[index]; //删除对应的文件
                                    tr.remove();
                                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                                });
    
                                that.elemList.append(tr);
                                element.render('progress'); //渲染新加的进度条组件
                            });
                        }
                        ,done: function(res, index, upload){ //成功的回调
                            var that = this;
                            //if(res.code == 0){ //上传成功
                            var tr = that.elemList.find('tr#upload-'+ index)
                                ,tds = tr.children();
                            tds.eq(3).html(''); //清空操作
                            delete this.files[index]; //删除文件队列已经上传成功的文件
                            return;
                            //}
                            //this.error(index, upload);
                        }
                        ,allDone: function(obj){ //多文件上传完毕后的状态回调
                            console.log(obj)
                        }
                        ,error: function(index, upload){ //错误回调
                            var that = this;
                            var tr = that.elemList.find('tr#upload-'+ index)
                                ,tds = tr.children();
                            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                        }
                        ,progress: function(n, elem, e, index){ //注意:index 参数为 layui 2.6.6 新增
                            element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
                        }
                    });
                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                    });
    
                })
            </script>
        </body>
    
    </html>
    

    后端:

       <!--文件上传相关-->
            <dependency>
                <groupId>commons-net</groupId>
                <artifactId>commons-net</artifactId>
                <version>3.1</version>
            </dependency>
            <dependency>
                <groupId>com.jcraft</groupId>
                <artifactId>jsch</artifactId>
                <version>0.1.49</version>
            </dependency>
            <dependency>
                <groupId>ch.ethz.ganymed</groupId>
                <artifactId>ganymed-ssh2</artifactId>
                <version>261</version>
            </dependency>
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.28</version>
            </dependency>
            <dependency>
                <groupId>com.fasterxml.jackson.core</groupId>
                <artifactId>jackson-databind</artifactId>
                <version>2.8.3</version>
            </dependency>
    

    controller(返回类型必须遵循该ui框架的格式,所以创建了个map):

    package com.wang.controller;
    
    import java.nio.file.Files;
    import java.nio.file.Path;
    import java.nio.file.Paths;
    import java.util.HashMap;
    import java.util.Map;
    import java.util.Objects;
    
    import com.fasterxml.jackson.core.JsonProcessingException;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.wang.utils.FileUtils;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.multipart.MultipartFile;
    
    @RestController
    @RequestMapping("/upload")
    public class UploadController {
    
        @Autowired
        private static final ObjectMapper MAPPER = new ObjectMapper();
    
        @PostMapping("/file")
        public String upload(@RequestParam("file") MultipartFile file) throws JsonProcessingException {
            try {
    
                if (Objects.isNull(file) || file.isEmpty()) {
                    //判断非空
                    Map<String, Object> map3 = new HashMap<>();
                    map3.put("code", 201);
                    map3.put("msg", "文件为空,请重新上传");
                    map3.put("data", "文件为空,请重新上传");
                    return MAPPER.writeValueAsString(map3);
                }
                byte[] bytes = file.getBytes();
                //要存入本地的地址放到path里面
                Path path = Paths.get( FileUtils.UPLOAD_FOLDER + "/");
                //如果没有files文件夹,则创建
                if (!Files.isWritable(path)) {
                    Files.createDirectories(path);
                }
                //String extension = FileUtils.getFileExtension(file);  //获取文件后缀
                FileUtils.getFileByBytes(bytes, FileUtils.UPLOAD_FOLDER, file.getOriginalFilename());
                System.out.println(file.getOriginalFilename());
    
                Map<String, Object> map = new HashMap<>();
                map.put("code", 200);
                map.put("msg", "上传成功");
                map.put("data", "上传成功");
    
                return MAPPER.writeValueAsString(map);
            } catch (Exception e) {
                e.printStackTrace();
            }
            Map<String, Object> map2 = new HashMap<>();
            map2.put("code", 201);
            map2.put("msg", "上传失败");
            map2.put("data", "上传失败");
            return MAPPER.writeValueAsString(map2);
        }
    }
    
    展开全文
  • 今天小编就为大家分享一篇layui实现图片上传并限制上传的图片数量,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 通常情况下,我们都是借助type="file" 的input 标签来实现文件上传的,然而,它不能很好地与其它表单元素共存。面对这样的问题,可以将文件上传单独做成一个上传接口,通过异步上传的方式,先将图片上传存储,返回...

    通常情况下,我们都是借助type="file" 的input 标签来实现文件上传的,然而,它不能很好地与其它表单元素共存。面对这样的问题,可以将文件上传单独做成一个上传接口,通过异步上传的方式,先将图片上传存储,返回相关的文件信息,然后与其它表单一起提交到数据库。

    上一篇文章《基于ThinkPHP5+layui框架,实现图片上传以及图片预览》,通过实现EY内容管理系统的文章发布功能,简单的实现了单个图片上传。

    今天想实现多图上传(即多文件批量上传),就小试了一下牛刀,几经周折也算实现了多文件上传,并增加额外参数到提交到后台,今天将前端相关的html代码和js代码分享一下:

    layui实现多文件上传、预览、增加额外参数相关的html代码

    实现多文件上传、预览、增加额外参数相关的js代码如下:

    layui实现多文件上传、预览、增加额外参数相关的js代码请点击此处输入图片描述

    因为layui的多表单提交不能像通常情况下,通过name="pic[]"来实现,必须通过以下形式实现,所以需要动态赋值。

    就是这样,虽然代码不是特别的优化,能实现功能就好,或许数天时候再次遇到类似问题时会有更好的代码实现。关于上传接口这一块实现这一块可参考上一篇文章。

    展开全文
  • 基本的后台管理框架系统,可以在该基础上进行二次开发,也可以自行改装,内置权限管理/菜单管理/角色管理/管理员管理/系统信息/管理员信息修改/图片上传。 需要注意点:1端口设置,xampp版本没有测过,之前出现版本...
  • 2、layui多文件上传局限性:有几张图片就会向后台请求几次 3、使用layui组件原因:方便图片预览,图片删除功能的实现 4、实现思路 (1)利用layui多文件上传组件,更方便的实现图片预览和删除功能,但不使用它...

    layui的多图片上传+formData+ajax提交文件+thinkphp5后台接收

    1、需求:多图片和文本内容同时提交,thinkphp5后台处理,方便数据库回滚

    2、layui多文件上传局限性:有几张图片就会向后台请求几次

    3、使用layui组件原因:方便图片预览,图片删除功能的实现

    4、实现思路

    (1)利用layui多文件上传组件,更方便的实现图片预览和删除功能,但不使用它本身提交图片

    (2)利用全局变量files,每次选择文件时,把文件追加到files中

    (3)利用formData对象,把全局变量files 中的文件以及文本内容存入formData中

    (4)ajax提交

    5、代码

    HTML代码:

    <div class="layui-upload">
       <button type="button" class="layui-btn" id="file">图片上传: </button>
       <blockquote class="layui-elem-quote layui-quote-nm">
        预览图:
          <div class="layui-upload-list">
              <ul id="photo-list"></ul>
           </div>
        </blockquote>
    </div>

    js代码:

    var files = '';//定义全局变量,以便每次选择图片时,把文件放入队列
    /******图片的预览,删除******/
    function uploadImages(){
        layui.use('upload', function(){
            let upload = layui.upload;
            let url = '';
    
             //多图片上传
            upload.render({
                elem: '#file',
                url: url,//该案例中将使用ajax提交,故此路由并没有使用
                accept: 'images',
                auto: false,//不自动提交
                multiple: true,
                number: 3,
                choose: function(obj){
                    files = this.files = obj.pushFile(); //把文件追加到队列
    
                    //预读本地文件示例
                    obj.preview(function(index, file, result){
                        //图片预览
                        let liStr = '<li>'
                        +'<img src="'+ result +'" alt="'+ file.name +'" class="my-upload-img">'
                            +'<i class="layui-icon del-photo" title="删除">&#xe640;</i>'
                        +'</li>';
                        $('#photo-list').append(liStr);
                    
                        //删除预览图片
                        let num = $('#photo-list .del-photo').size();
                        $('#photo-list .del-photo').eq(num-1).on('click',function(){
                            $(this).parent().remove();
    
                            delete files[index];//从全局变量中移除该文件
                        });
                    
                    });
                },
            });
        });
    }
    
    /******ajax提交多张图片和文本内容******/
    function dataSub(){
     let url = '';//要提交数据的路由
    
     let formData = new FormData();
        
     for (let i in files) { //这个files就是全局变量
        formData.append('file[]',files[i]);
     }
        
     formData.append('content','我是文本内容');
        
     $.ajax({
        url : url,
        type : 'post',
        data : formData,
        cache : false,
        contentType : false,  //需要设置为false,不然后台拿不到数据
        processData : false,  //传送DOM信息,所以设为false
        success : function(msg) {
           files = '';//初始化全局变量
                   
        }
     })
    }

    thinkphp5接收处理

    public function addContent(){
        /******图片处理******/
        $files = request()->file('file');
        //要存储图片的路径
        $path = explode('/..',ROOT_PATH)[0].'\public\upgrade';
        foreach($files as $file){
            $info = $file->move($path);//移动图片到特定路径
            
            if($info){
                //获取文件存储路径
                $new_path = $path.'\\'.$info->getSaveName();
                //存入数据库
                ...........................................
            }
            
        }
    
        /******文本处理******/
        $content = $_POST['content'];
        //存入数据库
        ...........................................
        
    }
    

     

    展开全文
  • layui图片上传功能,和表单同步上传或只上传表单,若看不懂,文件里有完整项目分享
  • Layui多文件上传案例

    2022-04-21 18:41:25
    后台系统</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-...
  • 今天做了一个多文件上传的页面,运用的是layui前端框架,顺便把后台处理代码也贴出来,仅供参考第一步:layui下载安装第二步:前端样式选择文件文件名大小状态操作开始上传取消第三步:js处理$(function(){var id=...
  • 前端 <div class="layui-upload"> <button style="margin-left: 110px;...选择文件</button> <div style="margin-left: 110px;" class="layui-upload-list" style="max-width: 1000px;
  • layui详细文件上传(前后台

    千次阅读 2021-12-23 16:47:45
    文件上传这个功能是做网站必不可少的,layui中的文件上传还是挺不错的,简单实用 1、form表单进行文件上传,中间表单内容我就省略了,注意:enctype设为multipart/form-data <form class="layui-form layui-form...
  • 使用layui上传多文件

    2020-08-04 15:19:22
    使用layui上传多文件 HTML部分 <div class="layui-form-item" > <label class="layui-form-label">上传多文件</label> <input type="hidden" id="carFullPicture" name="carFullPicture" ...
  • layui upload 多文件上传

    2019-12-12 13:51:13
    layui 选择多文件上传 语法 multiple: true 例子 upload.render({ elem: '#openStudentCode', url: '/scoreSystem/openStudentCode', accept: 'file', exts: 'xml|txt|TXT|text|TEXT|...
  • layui+php实现多文件上传的方法发布时间:2020-05-18 15:57:23来源:亿速云阅读:118作者:小新今天小编给大家分享的是layui+php实现多文件上传的方法,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了...
  • 使用layui框架实现文件上传流程如下;选择图片,将图片传至后台保存到指定文件夹下。后台向前台返回图片在服务器下的路径地址。前台将获得的地址填入隐藏控件中随着表单一起提交到后台。这样以来,表单提交的就不再...
  • layui文件上传后台接收

    千次阅读 2020-05-09 17:04:21
    // 是否创建文件成功 if(isCreateSuccess){ //将文件写入 //第一种 //file.transferTo(savedFile); //第二种 } } catch (Exception e) { e.printStackTrace(); } }...
  • layui上传文件data后台怎么获取

    千次阅读 2021-01-12 00:13:05
    本文环境:windows10、layui2.5.6,本文适用于所有品牌的电脑。思路:首先获取原始文件名你,并截取文件名后缀;然后重新命名新文件名;最后判断文件路径是否存在该文件,如果存在则将文件写入即可。代码示例:@...
  • layui 多文件上传带进度条踩坑

    千次阅读 2021-01-27 04:28:43
    原文作者提供的upload.js文件,html和js方法均可借鉴,问题是按作者的搞下来,却未能成功。可坑啦,完成了98%,剩下的2%却好难搞出来。踩坑如下:坑一toUpload?id=5221282942990596404:227 Uncaught ReferenceError: ...
  • 基于SpringBoot与LayUI后台管理系统 一套SpringBoot+MyBatis+...在D盘根目录下创建hrm-upload文件夹,用于文件上传 (可通过配置文件更改) 运行Application.java 访问 登录即可使用 特色/解决的一些问题: 后端: 抽取CRU
  • layui实现单文件上传

    2021-03-25 06:43:16
    layui文件上传是真的恶心,你说用你的都是搞后端的,你功能提供的不全,还得让我一个一个去找,找到最后发现还没有这个功能!还得自己去实现!TMD!(本章主要解决单文件上传的一些恶心bug) 以下问题为非自动上传...
  • 这篇文章主要介绍了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作,结合实例形式分析了layui框架结合thinkPHP进行文件上传与处理操作相关实现技巧,需要的朋友可以参考下本文实例讲述了layui框架实现文件...
  •  .net mvc 项目 公司前端ui升级 以前上传文件使用的是 <input type="file">然后用name属性将文件值传到后端 现在用的layui组件 请问大神们如何将文件传到后端</p>
  • springboot+layui多文件上传到本地

    千次阅读 2020-02-29 15:54:58
    直接复制layui官方文档代码 <div class="layui-upload"> <button class="layui-btn layui-btn-normal" id="testList" type="button"&...选择文件</button> <div class="layui-upload-list">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,887
精华内容 1,154
关键字:

layui 后台 多文件上传