layui + jfinal 实现上传下载

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

2.导入相关的库文件

layui的库文件

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

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

作为根目录路径。

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"></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/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 实现上传下载的更多相关文章

Struts2配合layui多文件上传--下载
先说上传: 前台上传文件的js代码: var demoListView = $('#demoList') ,uploadListIns = upload.render({ elem: '#testLi ...
.net mvc + layui做图片上传（二）—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
SpringBoot实现上传下载(二)
这篇写下载. **1.实现思路** 上一篇的数据库设计中,我们有一个字段始终没有用到fileName,这是用来给Layer对象存储文件名的,以此来完成文件与对象的对应, ![image.png](ht ...
Struts的文件上传下载
Struts的文件上传下载 1.文件上传 Struts2的文件上传也是使用fileUpload的组件,这个组默认是集合在框架里面的.且是使用拦截器:<interceptor name=" ...
基于Spring Mvc实现的Excel文件上传下载
最近工作遇到一个需求,需要下载excel模板,编辑后上传解析存储到数据库.因此为了更好的理解公司框架,我就自己先用spring mvc实现了一个样例. 基础框架之前曾经介绍过一个最简单的spring ...
Android okHttp网络请求之文件上传下载
前言: 前面介绍了基于okHttp的get.post基本使用(http://www.cnblogs.com/whoislcj/p/5526431.html),今天来实现一下基于okHttp的文件上传. ...
用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具
直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区 ...
Javaweb学习笔记——上传下载文件
一.前言在Javaweb中,上传下载是经常用到的功能,对于文件上传,浏览器在上传的过程中是以流的过程将文件传给服务器,一般都是使用commons-fileupload这个包实现上传功能,因为comm ...
服务器文件上传下载（XShell+Xftp）
1.下载XShell安装包+Xftp安装包.百度网盘(XShell):https://pan.baidu.com/s/1eR4PFpS 百度网盘(Xftp):https://pan.baidu.com ...

随机推荐

一.把传统服务做成dubbo分布式服务架构的步骤
1.把传统服务按照一定原则(根据项目的业务逻辑和场景)拆分成多个服务(主要服务是服务提供者和服务消费者,服务提供者或服务消费者的公共部分也可以拆分成其他服务,如公共DAO.公共工具类.公共实体,公共w ...
Codeforces Round #410 (Div. 2)C. Mike and gcd problem
题目连接:http://codeforces.com/contest/798/problem/C C. Mike and gcd problem time limit per test 2 secon ...
再起航，我的学习笔记之JavaScript设计模式30(简单模板模式)
简单模板模式概念介绍简单模板模式(Simple template): 通过格式化字符串拼凑出视图避免创建视图时大量节点操作,优化内存开销. 创建模板在实际的业务中如果我们需要进行前后台交互,或多 ...
idea自我使用简单使用方式和出现的一些简单问题以及常用快捷键
首先配置完Idea的简单使用步骤后,今天在使用Idea时,一直持续提示web项目404的错误提示,因为之前使用idea时,部署的是springBoot的项目,使用的是SpringBoot自带的Tomc ...
Ionic3学习笔记（五）动画之使用 animate.css
本文为原创文章,转载请标明出处目录前言 animate.css 的使用 animate.scss 的使用 1. 前言 animate.css 是一款强大的.跨浏览器的预设CSS3动画库,内置了很多 ...
C# 7 局部函数剖析
局部函数是C# 7中的一个新功能,允许在一个函数中定义另一个函数. 何时使用局部函数? 局部函数的主要功能与匿名方法非常相似:在某些情况下,创建一个命名函数在读者的认知负担方面代价太大.有时,函数本身 ...
c# gdi+输出成不同mime类型的图片
/// <summary> /// 通过图片的mime类型得到相应的编码器 /// </summary> /// <param name="mimeType&q ...
c# 反射得到实体类的字段名称和值，DataTable转List<T>
/// <summary> /// 反射得到实体类的字段名称和值 /// var dict = GetProperties(model); /// </summary> /// ...
SQL SERVER 查看日志大小及日志已满的处理方法 (转)
--解决方法 --日志文件满而造成SQL数据库无法写入文件时,可用两种方法: --查看数据库日志大小 dbcc sqlperf(logspace) --清空日志. --1．打开查询分析器,输入命令 D ...
推荐系统架构-(附ppt&代码）
Part1.乐视网视频推荐系统推荐系统:和传统的推荐系统架构无异(基础建模+规则) 数据模块特点:用户反馈服务数据->kv 缓存->log存储行为日志->解析/聚合->se ...

layui + jfinal 实现上传下载

layui + jfinal 实现上传下载的更多相关文章

随机推荐

热门专题