图片上传控件用的是zyupload控件，使用过程中遇到了一些问题，特别记录下来
上图是目前的使用效果，这个控件我是用js代码动态添加出来的
HTML代码：
<div class="widget-body">
<div class="widget-main padding-12" id="uploadarea">
<ul class="ace-thumbnails clearfix" id="gallery">
</ul>
</div>
</div>
js代码：
function initZyupload(){
var uploadarea=document.getElementById("uploadarea");
var zyupload=document.createElement("div");
zyupload.setAttribute("id","zyupload");
zyupload.setAttribute("class","zyupload");
uploadarea.appendChild(zyupload);
$("#zyupload").zyUpload({
width : "700px", // 宽度
height : "400px", // 高度
itemWidth : "140px", // 文件项的宽度
itemHeight : "140px", // 文件项的高度
url : $("#zyupload").url= basePath+"/smart/activity/saveImages.do?id="+$("#form_Id").val(), // 上传文件的路径
fileType : ["jpg","jpeg","bmp","png"],// 上传文件的类型
fileSize : 51200000, // 上传文件的大小
multiple : true, // 是否可以多个文件上传
dragDrop : true, // 是否可以拖动上传文件
tailor : true, // 是否可以裁剪图片
del : true, // 是否可以删除文件
finishDel : false, // 是否在上传文件完成后删除预览
/* 外部获得的回调接口 */
onSelect: function(selectFiles, allFiles){ // 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件
console.info("当前选择了以下文件：");
console.info(selectFiles);
},
onDelete: function(file, files){ // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件
console.info("当前删除了此文件：");
console.info(file.name);
},
onSuccess: function(file, response){ // 文件上传成功的回调方法
console.info("此文件上传成功：");
console.info(file.name);
console.info("此文件上传到服务器地址：");
console.info(response);
var obj=eval("("+response+")");
$("#uploadInf").append("<p>上传成功，文件地址是：" + obj.result+ "</p>");
var imgs=$("#form_url").val();//获取原url组
//在url后添加新图片的url
if(imgs){
imgs+=","+obj.msg;
}else{
imgs+=obj.msg;
}
$("#form_url").val(imgs);//设置新url组
saveActivityInfo();
clearImg();//清除所有图片
initImg(imgs);//加载图片
},
onFailure: function(file, response){ // 文件上传失败的回调方法
console.info("此文件上传失败：");
console.info(file.name);
bootbox.alert("上传失败");
},
onComplete: function(response){ // 上传完成的回调方法
console.info("文件上传完成");
console.info(response);
}
});
}
这个控件自带裁剪功能，但是当图片大小过大的时候就会显示不全，因为它并没有调整图片大小，原本多大就是多大
这个是我修改过后的效果
现在可以根据显示区域的大小来对图片进行缩放
源码代码修改部分，我现在技术不够，代码写的比较烂
首先定义2个全局变量
var ScaleWidth=0;//裁剪后图片宽度
var Scale=1;//图片缩放倍数
首先找到定义图片宽度高度处，进行修改
zoomContent.html(image).delay(500).addClass("loading");
image.load(render).attr("src", para.src);
var editWidth = $("#zoom").width();
var editHeight = $("#zoom").height();
var xScale = 1;
var yScale = 1;
if(editWidth < image.width()){
xScale = editWidth/image.width();
}
if(editHeight < image.height()){
yScale = editHeight/image.height();
}
if(xScale > yScale){
xScale = yScale;
Scale=xScale;
}
其他地方也要相应修改
zoomContent.animate({
width: image.width()*xScale,
height: image.height()*xScale,
marginTop: -(image.height()*xScale / 2) - borderWidth,
marginLeft: -(image.width()*xScale / 2) - borderWidth
},
200,
function() {
show(image)
});
function show(image) {
image.show();
zoomContent.removeClass("loading");
self.createTailorPlug()
}
}
};
this.createTailorPlug = function() {
var width = $("#tailorImg").width();
var height = $("#tailorImg").height();
var editWidth = $("#zoom").width();
var editHeight = $("#zoom").height();
var xScale = 1;
var yScale = 1;
if(editWidth < width){
xScale = editWidth/width;
}
if(editHeight < height){
yScale = editHeight/height;
}
if(xScale > yScale){
xScale = yScale;
Scale=xScale;
}
ScaleWidth=width*xScale;
$("#tailorImg").css("width",width*xScale);
$("#tailorImg").css("height",height*xScale);
$("#tailorImg").css("position","relative");
var x1 = (width*Scale/2)-(width*Scale/5);
var y1 = (height*Scale/2)-(height*Scale/5);
var x2 = (width*Scale/2)+(width*Scale/5);
var y2 = (height*Scale/2)+(height*Scale/5);
好了，到此为止前端的工作完成，接下来是后端实现，项目用的是spingmvc+sping+hibernate的架构
java代码Controller部分：
@RequestMapping(value = "/saveImages")
@ResponseBody
public MessageBox saveImages(MultipartFile file,String id) throws Exception{
this.logAllRequestParams(); String rootPath = this.getSession().getServletContext().getRealPath("/");
Double width = Double.parseDouble(this.getReqParam("tailorWidth")); //图片缩放所需宽度
String tailor = this.getReqParam("tailor");
ImageCut cut = null;
if(!tailor.equals("false")){
cut = JSON.parseObject(tailor, ImageCut.class);
} //重命名
String fileName = file.getOriginalFilename();
String fileSuffix=fileName.substring(fileName.lastIndexOf(".")+1);
fileName=String.valueOf(System.currentTimeMillis())+"."+fileSuffix; String fileParant=rootPath + "/mirror/activity/"+id+"/";
File folder = new File(fileParant);
if (!folder.exists()){
folder.mkdirs();
}
File f = new File(folder,fileName);
file.transferTo(f);
//图片裁剪
if(CommonUtil.isNotBlank(cut)){
ImageCutUtil.covertImage(f, width, cut);
}else{
ImageCutUtil.commpressPic(f.getPath(), f.getPath());
}
return returnSuccessInfo(fileName,fileParant+fileName);
}
到此为止图片上传裁剪功能全部完成