搜索
首页web前端Layui教程layui+jfinal实现上传的方法

layui+jfinal实现上传的方法

尚
尚
Dec 05, 2019 pm 04:57 PM
layui

layui+jfinal实现上传的方法

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(&#39;upload&#39;, function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: &#39;#test1&#39;
    ,url: &#39;/hello/handleUpload&#39;
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $(&#39;#demo1&#39;).attr(&#39;src&#39;, 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(&#39;上传失败&#39;);
      }
      //上传成功
      layer.msg("上传成功");
      console.log(res.msg);
      $("#download").html("<a class=&#39;layui-btn layui-btn-small&#39; href=&#39;/hello/download?name="+res.msg+"&#39;>下载</a>");
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $(&#39;#demoText&#39;);
      demoText.html(&#39;<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>&#39;);
      demoText.find(&#39;.demo-reload&#39;).on(&#39;click&#39;, 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/handleUpload
java.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 more
Caused 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 more
Caused 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实现上传的方法的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文转载于：博客园。如有侵权，请联系admin@php.cn删除
相关文章
如何使用Layui的流块模块进行无限滚动？如何使用Layui的流块模块进行无限滚动？Mar 18, 2025 pm 01:01 PM

文章讨论了使用Layui的流量模块进行无限滚动，涵盖设置，最佳实践，性能优化和自定义，以增强用户体验。

如何使用Layui的元素模块来创建选项卡，手风琴和进度条？如何使用Layui的元素模块来创建选项卡，手风琴和进度条？Mar 18, 2025 pm 01:00 PM

本文详细介绍了如何使用Layui的元素模块来创建和自定义UI元素，例如选项卡，手风琴和进度条，突出显示HTML结构，初始化和常见的陷阱，以避免。

如何自定义Layui旋转木制模块的外观和行为？如何自定义Layui旋转木制模块的外观和行为？Mar 18, 2025 pm 12:59 PM

本文讨论了自定义Layui的Carousel模块，重点介绍了外观和行为的CSS和JavaScript修改，包括过渡效果，自动播放设置以及添加自定义导航控件。

如何使用Layui的旋转木载模块来创建图像滑块？如何使用Layui的旋转木载模块来创建图像滑块？Mar 18, 2025 pm 12:58 PM

该文章指导使用Layui的Carousel模块用于图像滑块，详细介绍设置的步骤，自定义选项，实现自动播放和导航以及性能优化策略。

如何将Layui的上传模块配置为限制文件类型和尺寸？如何将Layui的上传模块配置为限制文件类型和尺寸？Mar 18, 2025 pm 12:57 PM

本文讨论了使用Accept，Exts和Size属性来限制Layui的上传模块，以限制文件类型和尺寸，并自定义错误消息以违反。

如何使用Layui的图层模块来创建模态窗口和对话框？如何使用Layui的图层模块来创建模态窗口和对话框？Mar 18, 2025 pm 12:46 PM

本文介绍了如何使用Layui的图层模块创建模态窗口和对话框，详细设置，类型，自定义和常见的陷阱要避免。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解锁Myrise中的所有内容
1 个月前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合，这些列表在安全评估过程中经常使用，都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表，帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上，他就可以访问到所需的每种类型的列表。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

显示更多

热门话题

gmail邮箱登陆入口在哪里
7517
15
CakePHP 教程
1378
52
steam的账户名称是什么格式
79
11
win11激活密钥永久
53
19
NYT连接提示和答案
21
66
显示更多