侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

layui+jfinal实现上传的方法

前端  /  管理员 发布于 5年前   322

layui + jfinal 实现上传下载:(推荐:layui使用教程)

1、需要把jfinal的环境配置好

2、导入相关的库文件

layui的库文件

1.jpg

就是这两个文件需要导入到自己的页面

JFinal 是基于Java 语言的极速 web 开发框架,其核心设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。在拥有Java语言所有优势的同时再拥有ruby、python等动态语言的开发效率。

注意:jfinal总会把路径拦截,所以需要静态文件处理。本人不太懂。就网上找了下,说webRoot就是根目录,所以引入的时候,一定要在路径最开始加上 “/”

作为根目录路径。

2.jpg

3、接下来就是前端和后台的编写了。

前端可以直接从layui的官网上查看相关文档,就是复制粘贴,改改就可以了

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>upload模块快速使用</title>  <link rel="stylesheet" href="/assets/layui/css/layui.css" media="all"></head><body> <div class="layui-upload">  <button type="button" class="layui-btn" id="test1"><i class="layui-icon">&#xe67c;</i>上传图片</button>  <div class="layui-upload-list">    <img class="layui-upload-img" id="demo1">    <p id="demoText"></p>    <p id="yudu"></p>      </div></div><p id="download"></p><script src="/assets/layui/layui.js"></script><script>layui.use('upload', function(){  var $ = layui.jquery  ,upload = layui.upload;    //普通图片上传  var uploadInst = upload.render({    elem: '#test1'    ,url: '/hello/handleUpload'    ,before: function(obj){      //预读本地文件示例,不支持ie8      obj.preview(function(index, file, result){        $('#demo1').attr('src', result); //图片链接(base64)        console.log(index); //得到文件索引        console.log(file); //得到文件对象        //console.log(result); //得到文件base64编码,比如图片        $("#yudu").html("<span>名字:"+file.name+"</span>"+"<span>大小:"+file.size+"</span>");      });    }    ,done: function(res){        //alert(res.code);      //如果上传失败      if(res.code > 0){        return layer.msg('上传失败');      }      //上传成功      layer.msg("上传成功");      console.log(res.msg);      $("#download").html("<a class='layui-btn layui-btn-small' href='/hello/download?name="+res.msg+"'>下载</a>");    }    ,error: function(){      //演示失败状态,并实现重传      var demoText = $('#demoText');      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');      demoText.find('.demo-reload').on('click', function(){        uploadInst.upload();      });    }  });  });</script></body></html>

这是全部代码,如果比较懒的同学可以直接复制,这个和官网上的基本一样,只是路径做了修改,里边有几行注释调试的地方,可以删除的

4.最后就是后台控制器的代码

/**     * 上传下载     */    public void upload(){        render("/upload.html");    }    /**     * 处理上传的东西,只有有方法就行。不用做处理就可以长传到默认的/upload 路径下   * 这里可以自己做优化,修改,这里每次只能上传一个文件。本人随手就写成list了     */    public void handleUpload(){    //这里是为了查看信息       // List<UploadFile> files = getFiles();    //补充,这样可以设置上传文件的路径,pact就是上传文件的路径,默认是在/update下,这是就是设置成了/update/pact/下,maxSize 设置文件每次上传的最大值    List<UploadFile> pacts = getFiles("pact", maxSize);        System.err.println(files.get(0).getFileName());        System.err.println(files.get(0).getUploadPath());        System.err.println(files.get(0).getOriginalFileName());        System.err.println(files.get(0).getContentType());        System.err.println(files.get(0).getParameterName());    //这里为了在页面上做下载所以就需要把文件上传到服务器的名字传过去,用作下载时候调用,找到指定的文件        setAttr("msg",files.get(0).getFileName());        renderJson();    }        /**     * 下载     */    public void download(){    //查看传过来的文件名字,测试用       // String para = getPara("name");       // System.err.println(para);    //拿到下载文件所在的服务器路径          String fpath = getSession().getServletContext().getRealPath("/upload");      //服务器路径和文件路径拼接          File file=new File(fpath+"/"+para);          //判断文件是否存在,存在就把文件传到前端下载           if(file.exists()){              renderFile(file);                    }             else{                  renderJson();            }      }这样基本就没什么了,写完了。注意这里可能会报一个错误[ERROR]-[Thread: qtp817406040-23]-[com.jfinal.core.ActionHandler.handle()]: /hello/handleUploadjava.lang.RuntimeException: java.lang.reflect.InvocationTargetException    at com.jfinal.aop.Invocation.invoke(Invocation.java:87)    at com.jfinal.core.ActionHandler.handle(ActionHandler.java:74)    at com.jfinal.core.JFinalFilter.doFilter(JFinalFilter.java:73)    at org.eclipse.jetty.servlet.ServletHandler$CachedChain.doFilter(ServletHandler.java:1307)    at org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:453)    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:137)    at org.eclipse.jetty.security.SecurityHandler.handle(SecurityHandler.java:560)    at org.eclipse.jetty.server.session.SessionHandler.doHandle(SessionHandler.java:231)    at org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1072)    at org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:382)    at org.eclipse.jetty.server.session.SessionHandler.doScope(SessionHandler.java:193)    at org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:1006)    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:135)    at org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:116)    at org.eclipse.jetty.server.Server.handle(Server.java:365)    at org.eclipse.jetty.server.AbstractHttpConnection.handleRequest(AbstractHttpConnection.java:485)    at org.eclipse.jetty.server.AbstractHttpConnection.content(AbstractHttpConnection.java:937)    at org.eclipse.jetty.server.AbstractHttpConnection$RequestHandler.content(AbstractHttpConnection.java:998)    at org.eclipse.jetty.http.HttpParser.parseNext(HttpParser.java:856)    at org.eclipse.jetty.http.HttpParser.parseAvailable(HttpParser.java:235)    at org.eclipse.jetty.server.AsyncHttpConnection.handle(AsyncHttpConnection.java:82)    at org.eclipse.jetty.io.nio.SelectChannelEndPoint.handle(SelectChannelEndPoint.java:628)    at org.eclipse.jetty.io.nio.SelectChannelEndPoint$1.run(SelectChannelEndPoint.java:52)    at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:608)    at org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:543)    at java.lang.Thread.run(Thread.java:745)Caused by: java.lang.reflect.InvocationTargetException    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)    at java.lang.reflect.Method.invoke(Method.java:498)    at com.jfinal.aop.Invocation.invoke(Invocation.java:73)    ... 25 moreCaused by: java.lang.NoClassDefFoundError: com/oreilly/servlet/multipart/FileRenamePolicy    at com.jfinal.core.Controller.getFiles(Controller.java:775)    at com.rjj.control.StudentControl.handleUpload(StudentControl.java:235)    ... 30 moreCaused by: java.lang.ClassNotFoundException: com.oreilly.servlet.multipart.FileRenamePolicy    at java.net.URLClassLoader.findClass(URLClassLoader.java:381)    at java.lang.ClassLoader.loadClass(ClassLoader.java:424)    at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:331)    at java.lang.ClassLoader.loadClass(ClassLoader.java:357)    at org.eclipse.jetty.webapp.WebAppClassLoader.loadClass(WebAppClassLoader.java:430)    at com.jfinal.server.JFinalClassLoader.loadClass(JFinalClassLoader.java:53)    ... 32 more

这个问题是因为少一个jar包,只要把响应的jar导入就可以解决了。

以上就是layui+jfinal实现上传的方法的详细内容,更多请关注其它相关文章!


  • 上一条:
    layui+php实现多文件上传(附代码)
    下一条:
    用layui前端框架弹出form表单以及提交的方法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客