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

昨天学习了一下在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>

最终实现的效果：

源码已打包上传至csdn:

http://download.csdn.net/detail/hu1991die/8624263

有需要可以看看。。。共同学习，共同成长！！

原文出处：http://down.51cto.com/data/908936

时间： 2024-08-11 05:54:22

Jfinal框架学习系列之图片上传的相关文章

（转）淘淘商城系列——实现图片上传功能

http://blog.csdn.net/yerenyuan_pku/article/details/72808000 上文我们使用FastDFS-Client进行了简单的文件上传操作测试,淘淘商城项目中添加商品时上传图片的功能还没实现,如下图所示.本文将花大量笔墨来教大家如何实现图片上传这个功能. 我们来看下item-add.jsp页面,可以看到上传图片触发的方法是通过叫做picFileUpload的class来处理的,在<a>标签的下方是一个隐藏域,是用来接收图片上传到图片服务器的回显地址

Jfinal框架学习系列之二（JSP）

API里面说到jfinal框架支持JSP视图类型等多种视图类型,然后自己用的也是jsp,对jsp稍微熟悉一点,然后就想看看在jfinal中怎么使用jsp.这里实现一个小小的demo例子,还是基本的增删改查功能.分别使用Mysql和Oracle两种数据库..... 数据库脚本: 1.Mysql CREATE DATABASE jfinal_demo; USE jfinal_demo; CREATE TABLE `blog` ( `id` int(11) NOT NULL auto_incremen

ci框架配合uploadify使用图片上传bug

无意中踩中ci的一个bug(不知道算不算bug) 配合uploadify使用,使用ci自带的原生上传类中的mimes_types方法,调用配置文件mimes,图片类型中jpg和png中修改下参数, 修改前 修改后 增加application/octet-stream即可

[iOS AFNetworking框架实现HTTP请求、多文件图片上传下载]

简单的JSON的HTTP传输就不说了,看一个简单的DEMO吧. 主要明白parameters是所填参数,类型是字典型.我把这部分代码封装起来了,以便多次调用.也许写在一起更清楚点. #pragma mark - JSON方式post提交数据 - (void)postJSONWithUrl:(NSString *)urlStr parameters:(id)parameters success:(void (^)(id responseObject))success fail:(void (^)(

springMVC框架下——通用接口之图片上传接口

我所想要的图片上传接口是指服务器端在完成图片上传后,返回一个可访问的图片地址. spring mvc框架下图片上传非常简单,如下 1 @RequestMapping(value="/uploadImg", method=RequestMethod.POST) 2 @ResponseBody 3 public String uploadImg(@RequestParam(value="img")MultipartFile img){ 4 File f = new Fi

基于nodeJs express 框架的图片上传和编辑（引用美图编辑工具）上传小示例

唉,由于近期工作中对于新知识的运用相对较少,也导致小码哥少有更新鄙人心得的机会.还望路过的基友们不要抱怨,勿喷,,,,, 本篇文章,是基于NodeJs Express框架完成的一个用于项目中图片上传和编辑上传的小示例,当然,由于项目工期不禁,都是在非工作时间慢慢完成的,导致至今该图片上传功能也未能插入项目中真正的验证最终效果.不过就小码哥感觉,基本思路及基本功能算是完成了. 下面便由小码哥来给基友们稍微讲解改功能的实现过程及其中用到的一些技术等等. 首先,说说NodeJs Express框架的搭

图片上传插件梳理与学习

图片上传梳理与学习: 项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端: seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数,配置相关属性即可. 1.使用步骤 引入JS文件: JS代码构建对象,传入对应参数:同时JS中的方法可以进行图片上传之前之后的处理: 后台:实现图片上传同时返回结果: 2.AjaxUpload的学习参考: http://www.zhangxinxu.com/wordpress/2009/11/ajax-

ssm框架实现图片上传显示并保存地址到数据库

本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片. 本项目是使用maven搭建的项目,首先看下项目结构 相关配置自行搜索,下边直接实现上传功能 1.创建数据库 DROP TABLE IF EXISTS `product`; CREATE TABLE `product` ( `pid` int(11) NOT NULL AUTO_INCREMENT, `pimage` varchar(255) DE

TP框架配合jquery进行3种方式的多图片上传

用的TP5.1框架+jquery 一 使用form表单方式进行多图片上传 html代码: <form action="../admin/admin/cs" enctype="multipart/form-data" method="post"> <input type="file" name="image[]" /> <br> <input type="f