精华内容
下载资源
问答
  • layui文件上传后台(带自定参数)

    千次阅读 2019-04-02 10:17:17
    记录layui文件上传方法,前端页面直接看layui文件上传相关文档就行,主要是记录后端Java接收上传流并保存的方法 layui文档:https://www.layui.com/doc/modules/upload.html 因为该方法使用MultipartFile来接收...

    记录layui文件上传方法,前端页面直接看layui文件上传相关文档就行,主要是记录后端Java接收上传流并保存的方法

    layui文档:https://www.layui.com/doc/modules/upload.html

    因为该方法使用MultipartFile来接收layui上传流,所以需要在SpringMVC中配置multipart

    <bean id="multipartResolver"
            class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
            <property name="maxUploadSize" value="1000000000" />
        </bean>

     用于封装返回值编写的实体类Result(规范接口吐数据格式)

    package demo.util;
    
    import java.io.Serializable;
    import java.util.Map;
    
    import io.swagger.annotations.ApiModel;
    import io.swagger.annotations.ApiModelProperty;
    
    
    
    /**
     * 
    * 类名称:Result   
    * 类描述:  结果对象    
    * @version
     */
    @ApiModel(description = "Result实体类")
    public class Result<T> implements Serializable {
    
       private static final long serialVersionUID = 1L;
    
       /**
        * 编码
        */
       @ApiModelProperty(value = "编码")
       private int code;
    
       /**
        * 是否操作成功
        */
       @ApiModelProperty(value = "是否操作成功")
       private boolean success;
    
       /**
        * 提示信息
        */
       @ApiModelProperty(value = "提示信息")
       private String message;
    
       /**
        * 返回结果
        */
       @ApiModelProperty(value = "返回结果")
       private T result;
    
       public Result() {
          this(1, null, null, null);
       }
    
       public Result(int code) {
          this(code, null, null, null);
       }
    
       public Result(int code, Map<String, String> params) {
          this(code, params, null, null);
       }
    
       public Result(int code, T result) {
          this(code, null, null, result);
       }
    
       public Result(int code, Map<String, String> params, T result) {
          this(code, params, null, result);
       }
    
       public Result(int code, String message, T result) {
          this(code, null, message, result);
       }
    
       public Result(boolean isSuccess, String message, T result) {
          this((isSuccess ? 1 : 0), null, message, result);
       }
    
       public Result(int code, Map<String, String> params, String message, T result) {
          this.code = code;
          this.success = 1 == code;
          this.message = message ;
          this.result = result;
       }
    
       /**
        * 新建结果对象
        * 
        * @param isSuccess
        * @return
        */
       public static <T> Result<T> newResult(boolean isSuccess) {
          return new Result<T>(isSuccess, null, null);
       }
    
       /**
        * 新建结果对象
        * 
        * @param code
        * @param result
        * @return
        */
       public static <T> Result<T> newResult(int code, T result) {
          return new Result<T>(code, result);
       }
    
       /**
        * 新建结果对象
        * 
        * @param code
        * @param params
        * @return
        */
       public static <T> Result<T> newResult(int code, Map<String, String> params) {
          return new Result<T>(code, params, null);
       }
    
       /**
        * 新建结果对象
        * 
        * @param code
        * @param params
        * @param result
        * @return
        */
       public static <T> Result<T> newResult(int code, Map<String, String> params, T result) {
          return new Result<T>(code, params, result);
       }
    
       /**
        * 新建结果对象
        * 
        * @param code
        * @param message
        * @param result
        * @return
        */
       public static <T> Result<T> newResult(int code, String message, T result) {
          return new Result<T>(code, message, result);
       }
    
       /**
        * 新建结果对象
        * 
        * @param isSuccess
        * @param message
        * @param result
        * @return
        */
       public static <T> Result<T> newResult(boolean isSuccess, String message, T result) {
          return new Result<T>(isSuccess, message, result);
       }
    
       /**
        * 新建成功结果对象
        * 
        * @return
        */
       public static <T> Result<T> newSuccessResult() {
          return newResult(true, null, null);
       }
    
       /**
        * 新建成功结果对象
        * 
        * @param result
        * @return
        */
       public static <T> Result<T> newSuccessResult(T result) {
          return newResult(true, null, result);
       }
    
       /**
        * 新建失败结果对象
        * 
        * @return
        */
       public static <T> Result<T> newFailureResult(String message) {
          return new Result<T>(0, null, message, null);
       }
    
       /**
        * 新建失败结果对象
        * 
        * @param code
        * @return
        */
       public static <T> Result<T> newFailureResult(int code) {
          return new Result<T>(code, null, null, null);
       }
    
       public void setCode(int code) {
          this.code = code;
       }
    
       public int getCode() {
          return code;
       }
    
       public void setSuccess(boolean success) {
          this.success = success;
       }
    
       public boolean getSuccess() {
          return success;
       }
    
       public void setMessage(String message) {
          this.message = message;
       }
    
       public String getMessage() {
          return message;
       }
    
       public void setResult(T result) {
          this.result = result;
       }
    
       public T getResult() {
          return result;
       }
    
    } 

     Java上传方法

    /**
         * layui图片上传
         * @param multipartFile 上传文件file
         * @param version     传递的参数 
         * @return
         */
        @RequestMapping("/layupload")
        @ResponseBody
        public Result saveUploadPicture(@RequestParam(value="file") MultipartFile multipartFile,String version) {
    
            //FIXME:此行改为所在工程的对应的上传物理路径
            String uploadAbsolutePath = "D:///file//image";
            // 根据绝对路径在本地生成路径所需目录
            File file = new File(uploadAbsolutePath);
    
            if (!file.exists() && !file.mkdirs()) {
                // 如果file对象不存在,那么就将该对象的路径名中不存在的文件夹目录建立出来
                return Result.newFailureResult("文件上传路径不存在");
            }
            //原文件名
            String names = multipartFile.getOriginalFilename();
            // 文件扩展名
            String fileExt = names.substring(names.lastIndexOf(".") + 1).toLowerCase();
    
            // 文件上传后的新名
            String newName = version+ "." + fileExt;
            // 文件的绝对路径File
            File uploadFile = new File(uploadAbsolutePath + "/" + newName);
            try {
                // 将上传的图片二进制流保存为文件
                 FileCopyUtils.copy(multipartFile.getInputStream(), new FileOutputStream(uploadFile));
            } catch (IOException ioException) {
                log.info("图片保存到文件夹中出错!");
                Result.newFailureResult("文件上传失败");
            } catch (Exception e) {
               log.info("文件没有复制到指定的目录下");
            }
            Map<String, Object> result = new HashMap<>(2);
            result.put("oldName", names);
            result.put("newName", newName);
            //如果不使用封装返回方式,也可以直接返回map对象,可根据自己喜好和业务做修改
            return Result.newResult(1,"上传文件成功",result);
        }

     

    展开全文
  • 本文对接上篇文章《 layui.js实现多文件上传前端html写法总结》,后台和前端html的url的对应及相关参数可参考此文章 此功能实现所用的框架为springboot 代码如下: @ResponseBody @RequestMapping({"/demp/model...

    本文对接上篇文章《 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");//获取参数
            Map<String,Object> result = new HashMap<String, Object>();
            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格式的,像本文中返回JSONObjectMap<String,Object>都是可以的,此处要注意,返回值不能是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");//获取参数
            Map<String,Object> result = new HashMap<String, Object>();
            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);
            }
    
        }

     

    展开全文
  • HTML代码 <div class=" layui-fluid layui-bg-white"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">...拖拽上传</legend> </fie...

    HTML代码

    <div class=" layui-fluid layui-bg-white">
    
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>拖拽上传</legend>
        </fieldset>
    
        <div class="layui-upload-drag" id="demoimport">
            <i class="layui-icon"></i>
            <p>点击上传,或将文件拖拽到此处</p>
        </div>
    
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>为节省服务器开销,导入文件均为临时文件。</legend>
        </fieldset>
    
    </div>
    

    JS代码

       layui.use('upload', function () {
            var $ = layui.jquery
                    , upload = layui.upload;
    
            //拖拽上传
            upload.render({
                elem: '#demoimport'
                , url: '?m=Demo&a=uploadFile'
                , accept: 'file' //普通文件
                , exts: 'xls|xlsx' //只允许上传压缩文件
                , done: function (res) {
                    //如果上传失败
                    if (res.code == 0) {
                        return layer.msg('上传失败,' + res.err);
                    }
                    //上传成功
                    if (res.code > 0) {
                        layer.alert(res.err, {icon: 6}, function () {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            window.parent.location.reload();
                        });
                    }
                }
            });
        });
    

    PHP后台参数获取

    //获取表格的大小,限制上传表格的大小5M
    	$file_size = $_FILES['file']['size'];
    	if ($file_size > 5 * 1024 * 1024) {
    		$res['code'] = '0';
    		$res['err']  = '只能上传小于5M大小的文件!';
    		die(json_encode($res));
    	}
    
    //限制上传表格类型
    	$file_type = $_FILES['file']['type'];
    	if ($file_type != 'application/vnd.ms-excel') {
    		$res['code'] = '0';
    		$res['err']  = '上传失败,只能上传excel2003的xls格式!';
    		die(json_encode($res));
    	}
    

    Done!

    展开全文
  • 出错:上传文件成功,但是前端一直跳到error方法,提示上传失败信息,本例子原后台返回数据为string类型,前端Ajax异步请求,控制层为@@RestController。 解决办法:后台返回类型改为Map<String,Object> 代码...

    出错:上传文件成功,但是前端一直跳到error方法,提示上传失败信息,本例子原后台返回数据为string类型,前端Ajax异步请求,控制层为@@RestController。
    解决办法:后台返回类型改为Map<String,Object>
    代码为

    //上传图片
    @PostMapping("/upload")
    public Map<String,Object> imgString(MultipartFile file) throws IOException {
        //保存文件
    
        File path = new File(ResourceUtils.getURL("classpath:static").getPath());
        int index=ResourceUtils.getURL("classpath:").getPath().indexOf("target");
        String pathStr=path.getAbsolutePath().substring(0,index-1)+"src\\main\\resources\\static";
    
        File upload = new File(pathStr+"\\imgs\\"+file.getOriginalFilename());
        String result=""+upload.getName();
        file.transferTo(upload);
        System.out.println(result);
        Map map=new HashMap<String,Object>();
        map.put("msg","ok");
        map.put("code",200);
        return map;
    }
    
    展开全文
  • 1、首先官网:图片/文件上传 可以参考官网的例子。 注意:请求上传接口的额外参数。如:data: {id: ‘xxx’} 从 layui 2.2.6 开始,支持动态值 2、前台代码 html <form class="layui-form"> <div class...
  • layui文件上传

    千次阅读 2019-01-23 14:43:07
    前端代码 &lt;button type="button" class="layui-btn" id="...上传文件&lt;/button&gt; js代码 layui.use('upload', function(){  var $ = layui.jquery  
  • Layui上传图片后台MVC接收保存 首先是Layui上传图片的JS代码: 这个在官网的文档中都是有的。 layui.use('upload', function () { var $ = layui.jquery , upload = layui.upload; //普通图片上传 var ...
  • Layui文件上传带进度条

    万次阅读 热门讨论 2018-08-27 19:14:34
    最近项目有个需求,要求文件上传有实时进度条,前端框架使用的是layui,但是...1.修改layui文件上传ajax的代码: 这里使用的是layui(2.4.3版本)的非模块化 (layui.all.js),模块化请修改modules/upload.js ...
  • 文件上传效果类似163邮箱。使用了spring MVC作为后台layui+jquery作为前端技术。支持多文件上传。下载后直接导入myeclipse即可使用。
  • 1,文件上传控件开启 2,before内添加方法,以json格式存储数据。...以上这篇layui文件上传控件带更改后数据传值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • Layui 文件上传组件扩展

    千次阅读 2019-07-02 03:04:38
    通过本文的学习,可以了解 jQuery 是如何使用 FormData 上传文件,并且上传文件过程中是如何监听上传进度,如何取消正在上传的操作。 本文针对的是使用 Layui 的前端框架进行前端 UI 开发的初级开发人员,有助于提高...
  • 做课程设计时候,用到了layui文件上传接口,参考官方文档给出的响应接口文档: { "code": 0 ,"msg": "" ,"data": { "src": "http://cdn.layui.com/123.jpg" } } 然后具体的上传书写方式分为前端和后端,...
  • 前端代码: 后端代码: 源码地址:链接:https://pan.baidu.com/s/1FhUG2wAd6-Kpkt-EDHjtBw 提取码:hlmp 注:此源码还整合了layui后台管理系统模板和freemark模板引擎。
  • SSM框架使用Layui文件上传插件实现多文件上传(多文件列表) pom.xml文件的配置 想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入。如下: <!--commons-fileupload --> <...
  • 后台代码: public ActionResult Upload() { try { HttpFileCollectionBase files = Request.Files; HttpPostedFileBase file = files[0]; //获取文件名后缀 string extName = Path.GetExtension...
  • layUI上传以及后台post传递file

    千次阅读 2020-03-18 13:16:20
    前端前台代码 var uploadInst = upload.render({ elem: '#tjbtn' //绑定元素 ,accept:"file" , url: '/api/Bridge/layuiuploadfile' //上传接口 , done: function (job) { ...
  • 本文实例讲述了layui框架实现文件上传及TP3.2.3对上传文件进行后台处理操作。分享给大家供大家参考,具体如下: layui框架是1.0.9版本。。 首先html页面代码如下: <div class=layui-form-item id=upload_file> ...
  • layui文件上传到下载

    千次阅读 2019-05-16 18:22:00
    -----------------------------后台代码------------------------------------ @RequestMapping(value = "upload") @ResponseBody public Map<String, Object> upload( @RequestParam(value = "file...
  • 1、目的需求:前台批量上传文件,并在后台进行接收 前台代码:配置URL路径:url: '/KeepElectricty/uploadfiles'其中KeepElectricty是控制器,uploadfiles是接收方法 <!--HTML部分--> <div class=...
  • 【主要参照layui官方 文件上传示例 https://www.layui.com/demo/upload.html】 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> ...
  • layui框架是1.0.9版本。。首先html页面代码如下: &lt;div class="layui-form-item" id="upload_file"&gt; &lt;div class="layui-input-block" style="width: 300...
  • 这里没有使用表单文件上传 所以需要再后台代码上加注解 @MultipartConfig --%> <img id="userImg" style="width:160px;height:160px;" onerror="javascript:this.src='static/img/upload.png'
  • layui文件上传控件带更改后数据传值

    千次阅读 2018-03-19 11:36:54
    1,文件上传控件开启2,before内添加方法,以json格式存储数据。数据以对象形式存在,切对象格式不能直接传到后台,所以转化为json格式再进行传送。3,后台String接收param参数,转为json,直接通过get方法取值保存...
  • Layui文件上传,java后台(servlet实现)

    万次阅读 热门讨论 2018-07-11 15:47:27
    今天做了一个多文件上传的页面,运用的是layui前端框架,后面是找了好多都没找到java的代码,记得以前写过一次ajaxfileupload实现无刷新上传文件,拿过来试了一下,完美适配,下面直接贴代码。ajaxfileupload的代码...
  • layui上传图片的时候,主要是分两步,首先点击上传图片按钮,再此按钮上绑定图片上传的id,在这里请求后台上传文件接口,后台接口返回上传图片的路径值,然后再是提交表单把这个路径值提交到后台存到数据库。...
  • 前台代码 <form id="fm_upload" class="layui-form layui-form-pane" method="post" enctype="multipart/form-data" runat="server"> <div class="layui-upload"> <in...
  • 1.修改上传组件js(没测) https://blog.csdn.net/weixin_42457316/article/details/81017471 https://www.cnblogs.com/youmingkuang/p/9183528.html https://fly.layui.com/jie/19430/ 1、upload.js 扩展 功能...

空空如也

空空如也

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

layui文件上传后台代码