FlyHeLanMan的gravatar头像
FlyHeLanMan 2015-02-06 14:56:05

springMVC+Jcrop实现图片上传源代码分享,支持上传前预览 裁剪后再上传【打包自己的web工程】

我其实比较懒,一般所有的练习都在一个工程里面,这次把图片的这个工程分离出来了,用的是springmvc,但是程序有一点小bug,当第一次打开jcop.jsp选择图片是不会显示,此时刷新一下地址栏重新访问jcop.jsp就ok了,我也不知道为啥...

 

因为自己还在学习阶段,今天正好想实现这么一个小功能,说简单点就是上传图片,上传前可以预览,裁剪,类似上传头像的功能。参考了网上大部分资料,最后选择用Jcrop,因为正好在学springMvc,就结合起来了。下面是效果:

springMVC+Jcrop实现图片上传源代码分享,支持上传前预览 裁剪后再上传【打包自己的web工程】这个地方会报错,我猜想是名字冲突引起的,但是不影响最终效果。

上传成功后我设置的路径是保存在了发布目录下:

springMVC+Jcrop实现图片上传源代码分享,支持上传前预览 裁剪后再上传【打包自己的web工程】如图:_src结尾的是原图,_cut结尾的是裁剪之后的图。下面我把用到的工具包以及js文件打包,需要放到springMvc 的环境下。大家有问题在私信我吧,看到我会回复的,没问题神马的,最好啦。

总体思路是:jsp文件找到Controller,Controller里面调用了两个工具类,因为是初学,工具类都是copy过来的,算是收集起来跟大家分享吧。需要注意的是:要放到springMvc 环境下哦。

下面补一下jar包吧:原谅我的没有整理的习惯吧,初学者咯,基本我做的所有的联系都是这些jar包,不明白牛大人给的币好高,我也是借鉴的别人的代码撒。springMVC+Jcrop实现图片上传源代码分享,支持上传前预览 裁剪后再上传【打包自己的web工程】springMVC+Jcrop实现图片上传源代码分享,支持上传前预览 裁剪后再上传【打包自己的web工程】

 

下面打包一下吧: http://pan.baidu.com/s/1bnnPsvH 

 

加了点东西,把上传的原图给删除掉。加了一个删除文件的工具类,PS:晚上很多啦随便down,嘿嘿。

package com.bjsxt.util;

import java.io.File;

public class FileDelete {
    /** 
     * 删除文件、文件夹 
     */  
    public static void deleteFile(String path) {  
        File file = new File(path);  
        if (file.isDirectory()) {  
            File[] ff = file.listFiles();  
            for (int i = 0; i < ff.length; i++) {  
                deleteFile(ff[i].getPath());  
            }  
        }  
        file.delete();  
    }  
}

我是在cut工具类里输出裁剪后的图才删除的原图,如下:

 

springMVC+Jcrop实现图片上传源代码分享,支持上传前预览 裁剪后再上传【打包自己的web工程】


打赏

文件名:imgupload.rar,文件大小:5276.156K 下载
  • /
      • /imgupload
        • /imgupload/.classpath
        • /imgupload/.project
          • /imgupload/.settings
            • /imgupload/.settings/.jsdtscope
            • /imgupload/.settings/org.eclipse.jdt.core.prefs
            • /imgupload/.settings/org.eclipse.wst.common.component
            • /imgupload/.settings/org.eclipse.wst.common.project.facet.core.xml
            • /imgupload/.settings/org.eclipse.wst.jsdt.ui.superType.container
            • /imgupload/.settings/org.eclipse.wst.jsdt.ui.superType.name
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友