jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

2020-05-24 21:41:30易采站长站整理

String userName = SecurityContextHolder.getContext().getAuthentication().getName();

return getTime() + userName+"."+suffixName;
}
//文件上传,返回文件路径
public String uploadFile(MultipartFile file, HttpServletRequest request,HttpSession session) throws IOException {
String FILE_PATH = session.getServletContext().getRealPath("/") + "upload";
String fileName = getFileName(file,request,session);
File tempFile = new File(FILE_PATH, fileName);

if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdir();
}
if (!tempFile.exists()) {
tempFile.createNewFile();
}
file.transferTo(tempFile); //将上传文件写到服务器上指定的文件。

return FILE_PATH + "" + tempFile.getName();
}

/* public static File getFile(String fileName) {
return new File(FILE_PATH, fileName);
} */

public String getTime(){
Date date = new Date();
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");//设置日期格式
String nowTime = df.format(date).toString();
return nowTime;
}
}

这样就将图片要裁剪的图片路径返回页面展示

3.之后就是图片裁剪了,图片裁剪功能我找了好多插件,最后锁定jcrop,也是因为它的demo打动了我(太好看了),之后就是导入文件,在我这里,我在页面接收后台返回来的图片路径之后启用jcrop,也就是openJcrop()方法,这样就可以加载jcrop插件了,具体大家想进一步了解这个裁剪工具,请到官网细细的研究,我就不再做过多的谈论了。

大家注意,在这里有个大坑,真的是大坑,就是重新选择图片的时候,被jcrop加载过的img的src是不能被修改的,这个当初卡了我好长时间,被jcrop加载一次jcrop就会生成一个自己的编辑对象(我自己的理解),这时候就和原来的img没有关系了,直到最后细细研究api才找到了一个方法,唯一的方法就是将这个jcrop销毁,就是jcrop_api.destroy(),这个有很大的学问,我就提示一点,就是将jcrop_api声明为全局变量,下面贴出js代码(和上边的html是在一个文件下):


<script type="text/javascript">

$(function(){
var jcrop_api;
});

$("#file_upload").change(function() {
$("#msg").text('');
var oFile = $(this)[0].files[0];
//判断上传文件大小
if (oFile.size > 1*1024*1024) {
$("#msg").text('你选择了太大的文件,请选择一个1M以下的图像文件').css('color','red');
$(this).val("");
return;
}

//判断类型
var filepath=$(this).val();
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();