Jfinal框架学习系列之图片上传

浏览数：49 / 时间：2015年06月09日

昨天学习了一下在jfianl中使用jsp，然后实现了一个基本的增删改查的demo示例，今天了解了一下在jfinal中实现文件上传的功能，这里配合
了uploadify实现图片上传。。。这里只是可以简单地实现上传的功能，有的时候也需要自己进行压缩处理，，，貌似视频上传的时候有些问题。。。因为也是参照51CTO上面的一个demo实现的。。。

工程结构截图：

技术分享

具体实现代码如下：

1、DemoConfig核心配置类：

/**
  * 文件说明
  * @Description:扩展说明
  * @Copyright: 2015 dreamtech.com.cn Inc. All right reserved
  * @Version: V6.0
  */
package com.demo.config;

import com.demo.controller.CommonController;
import com.demo.controller.UploadController;
import com.jfinal.config.Constants;
import com.jfinal.config.Handlers;
import com.jfinal.config.Interceptors;
import com.jfinal.config.JFinalConfig;
import com.jfinal.config.Plugins;
import com.jfinal.config.Routes;
import com.jfinal.core.JFinal;
import com.jfinal.render.ViewType;

/**  
 * @Author: feizi
 * @Date: 2015年4月23日 上午11:42:18 
 * @ModifyUser: feizi
 * @ModifyDate: 2015年4月23日 上午11:42:18 
 * @Version:V6.0
 */
public class DemoConfig extends JFinalConfig {

    /**
     * @Discription:常量配置
     * @Author: feizi
     * @Date: 2015年4月23日 上午11:42:18
     * @ModifyUser：feizi
     * @ModifyDate: 2015年4月23日 上午11:42:18
     * @see com.jfinal.config.JFinalConfig#configConstant(com.jfinal.config.Constants)
     */
    @Override
    public void configConstant(Constants me) {
        me.setDevMode(true);
        me.setViewType(ViewType.JSP);
    }

    /**
     * @Discription:路由配置
     * @Author: feizi
     * @Date: 2015年4月23日 上午11:42:18
     * @ModifyUser：feizi
     * @ModifyDate: 2015年4月23日 上午11:42:18
     * @see com.jfinal.config.JFinalConfig#configRoute(com.jfinal.config.Routes)
     */
    @Override
    public void configRoute(Routes me) {
        me.add("/", CommonController.class);
        me.add("/upload", UploadController.class,"/upload");
    }

    /**
     * @Discription:配置插件
     * @Author: feizi
     * @Date: 2015年4月23日 上午11:42:18
     * @ModifyUser：feizi
     * @ModifyDate: 2015年4月23日 上午11:42:18
     * @see com.jfinal.config.JFinalConfig#configPlugin(com.jfinal.config.Plugins)
     */
    @Override
    public void configPlugin(Plugins me) {
    }

    /**
     * @Discription:全局拦截器配置
     * @Author: feizi
     * @Date: 2015年4月23日 上午11:42:18
     * @ModifyUser：feizi
     * @ModifyDate: 2015年4月23日 上午11:42:18
     * @see com.jfinal.config.JFinalConfig#configInterceptor(com.jfinal.config.Interceptors)
     */
    @Override
    public void configInterceptor(Interceptors me) {
    }

    /**
     * @Discription:配置处理器
     * @Author: feizi
     * @Date: 2015年4月23日 上午11:42:18
     * @ModifyUser：feizi
     * @ModifyDate: 2015年4月23日 上午11:42:18
     * @see com.jfinal.config.JFinalConfig#configHandler(com.jfinal.config.Handlers)
     */
    @Override
    public void configHandler(Handlers me) {
    }

    /**
     * 建议使用 JFinal 手册推荐的方式启动项目
     * 运行此 main 方法可以启动项目，此main方法可以放置在任意的Class类定义中，不一定要放于此
     */
    public static void main(String[] args) {
        //这里可以修改jetty-server的端口号
        JFinal.start("WebRoot", 85, "/", 5);
    }
}

2、CommonController类

/**
  * 文件说明
  * @Description:扩展说明
  * @Copyright: 2015 dreamtech.com.cn Inc. All right reserved
  * @Version: V6.0
  */
package com.demo.controller;

import com.jfinal.core.Controller;

/**  
 * CommonController
 * @Author: feizi
 * @Date: 2015年4月23日 下午12:19:37 
 * @ModifyUser: feizi
 * @ModifyDate: 2015年4月23日 下午12:19:37 
 * @Version:V6.0
 */
public class CommonController extends Controller {
    public void index(){
        render("index.jsp");
    }
}

3、UploadController类

/**
 * 文件说明
 * @Description:扩展说明
 * @Copyright: 2015 dreamtech.com.cn Inc. All right reserved
 * @Version: V6.0
 */
package com.demo.controller;

import com.jfinal.core.Controller;
import com.jfinal.upload.UploadFile;

/**
 * UploadController
 * 
 * @Author: feizi
 * @Date: 2015年4月23日 下午12:18:45
 * @ModifyUser: feizi
 * @ModifyDate: 2015年4月23日 下午12:18:45
 * @Version:V6.0
 */
public class UploadController extends Controller {

    public void index() {
        // UploadFile uf = this.getFile();

        System.out.println(getFile().getFileName());
        render("index.jsp");
    }

    public void uploads() {
        // 获取上传的文件
        UploadFile uf = getFile("Filedata", "uploads");

        // 拼接文件上传的完整路径
        String fileName = "http://" + this.getRequest().getRemoteHost() + ":"
                + this.getRequest().getLocalPort() + "/upload/uploads/"
                + uf.getFileName();

        this.setAttr("fileName", fileName);
        System.out.println("================fileName:"+fileName);

        //以json格式进行渲染
        renderJson();
    }
}

4、UploadInterceptor类

/**
  * 文件说明
  * @Description:扩展说明
  * @Copyright: 2015 dreamtech.com.cn Inc. All right reserved
  * @Version: V6.0
  */
package com.demo.interceptor;

import com.jfinal.aop.Interceptor;
import com.jfinal.core.ActionInvocation;

/**  
 * UploadInterceptor拦截器
 * @Author: feizi
 * @Date: 2015年4月23日 下午1:12:42 
 * @ModifyUser: feizi
 * @ModifyDate: 2015年4月23日 下午1:12:42 
 * @Version:V6.0
 */
public class UploadInterceptor implements Interceptor{

    /**
      * 请求拦截
      * @Discription:扩展说明
      * @Author: feizi
      * @Date: 2015年4月23日 下午1:13:56
      * @ModifyUser：feizi
      * @ModifyDate: 2015年4月23日 下午1:13:56
      * @see com.jfinal.aop.Interceptor#intercept(com.jfinal.core.ActionInvocation)
      */
    @Override
    public void intercept(ActionInvocation ai) {
        System.out.println("===============Before invoking " + ai.getActionKey());
        ai.invoke();
        System.out.println("===============After invoking " + ai.getActionKey());
    }

}

5、Upload类

/**
  * 文件说明
  * @Description:扩展说明
  * @Copyright: 2015 dreamtech.com.cn Inc. All right reserved
  * @Version: V6.0
  */
package com.demo.model;

import com.jfinal.plugin.activerecord.Model;

/**  
 * Upload
 * @Author: feizi
 * @Date: 2015年4月23日 下午1:11:04 
 * @ModifyUser: feizi
 * @ModifyDate: 2015年4月23日 下午1:11:04 
 * @Version:V6.0
 */
public class Upload extends Model<Upload>{
    private static final long serialVersionUID = -7829607291906618841L;

    public static final Upload dao = new Upload();
}

6、UploadValidator类

/**
  * 文件说明
  * @Description:扩展说明
  * @Copyright: 2015 dreamtech.com.cn Inc. All right reserved
  * @Version: V6.0
  */
package com.demo.validator;

import com.jfinal.core.Controller;
import com.jfinal.validate.Validator;

/**  
 * @Author: feizi
 * @Date: 2015年4月23日 下午1:15:38 
 * @ModifyUser: feizi
 * @ModifyDate: 2015年4月23日 下午1:15:38 
 * @Version:V6.0
 */
public class UploadValidator extends Validator{

    /**
      * 验证
      * @Discription:扩展说明
      * @Author: feizi
      * @Date: 2015年4月23日 下午1:16:02
      * @ModifyUser：feizi
      * @ModifyDate: 2015年4月23日 下午1:16:02
      * @see com.jfinal.validate.Validator#validate(com.jfinal.core.Controller)
      */
    @Override
    protected void validate(Controller c) {
    }

    /**
      * 处理错误
      * @Discription:扩展说明
      * @Author: feizi
      * @Date: 2015年4月23日 下午1:16:02
      * @ModifyUser：feizi
      * @ModifyDate: 2015年4月23日 下午1:16:02
      * @see com.jfinal.validate.Validator#handleError(com.jfinal.core.Controller)
      */
    @Override
    protected void handleError(Controller c) {
    }

}

7、index.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index.jsp</title>

<script src="uploadify/jquery.min.js" type="text/javascript"></script>
<script src="uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadify/uploadify.css">
</head>
<body>
    <form action="/upload/uploads" method="post" enctype="multipart/form-data">
        <input type="file" name="file_upload" id="file_upload"/>
        <input type="submit" name="uploadbutton" value="上传"/>
    </form>

    <!--  文件上传成功之后，文件的地址显示在这里  -->
    <ul id="url"></ul>

    <script type="text/javascript">
        $(function(){
            $("#file_upload").uploadify({
                //校验数据

                ‘swf‘ : ‘uploadify/uploadify.swf‘, //指定上传控件的主体文件，默认‘uploader.swf’
                ‘uploader‘ : ‘/upload/uploads‘, //指定服务器端上传处理文件，默认‘upload.php’
                ‘auto‘ : true, //自动上传
                ‘buttonImage‘ : ‘uploadify/uploadify-browse.png‘, //浏览按钮背景图片
                ‘multi‘ : false, //单文件上传
                ‘fileTypeExts‘ : ‘*.gif; *.jpg; *.png; *.flv; *.avi; *.mp4; *.mp3‘, //允许上传的文件后缀
                ‘fileSizeLimit‘ : ‘300MB‘, //上传文件的大小限制，单位为B, KB, MB, 或 GB
                ‘successTimeout‘ : 30, //成功等待时间
                ‘onUploadSuccess‘ : function(file, data, response) {
                    //每成功完成一次文件上传时触发一次
                    var image=eval("["+data+‘]‘)[0];
                    //alert(‘===file:‘+file);
                    //alert(‘===data:‘+data);//json格式
                    //alert(‘===response:‘+response);//true
                    //alert(‘===image:‘+image);
                    //alert(‘===image.fileName:‘+image.fileName);

                    $(‘#url‘).append("<li><img width=80 src="+image.fileName+" </li>");

                    /* var image=eval(data);
                    alert(image[0]["big"]); */
                },
                ‘onUploadError‘ : function(file, data, response) {
                    //当上传返回错误时触发
                    $(‘#url‘).append("<li>" + data + "</li>");
                }
            });
        });
    </script>
</body>
</html>