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
最代码最近下载分享源代码列表最近下载
hanxinjie  LV25 2019年8月12日
keen1066  LV17 2018年12月25日
cczzhh  LV9 2018年12月5日
haiwen  LV19 2018年11月8日
dangzhiyuan012  LV12 2018年5月10日
韩鹏飞  LV1 2018年4月29日
youlinewlife  LV8 2018年2月6日
dfaghrs  LV19 2018年1月26日
tyyeng  LV18 2018年1月2日
wgc_jy  LV21 2017年12月31日
最代码最近浏览分享源代码列表最近浏览
领通过后哄哄你  LV1 6月7日
kele200  LV3 2023年10月31日
zhy1989wz  LV6 2022年3月30日
微信网友_5826872227139584  LV1 2022年2月10日
chen12341234  LV11 2021年5月21日
哎呀  LV1 2021年5月15日
13427720820  LV8 2021年5月4日
zx54321  LV12 2021年3月30日
ghost_M  LV7 2021年1月7日
松烟入墨2018  LV16 2020年7月4日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友