SpringMVC上传图片预览-优快云博客

本文介绍了一个基于SpringMVC的图片上传组件，通过使用jQuery插件实现了图片的即时预览功能。该组件能够方便地集成到现有项目中，并支持自定义裁剪等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上传代码的重用性

在springmvc基础上处理上传

上传图片预览

上传jsp页面：

[java] view plain copy print ?

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<scriptsrc="js/jquery.Jcrop.min.js"></script>
<linkrel="stylesheet"href="css/jquery.Jcrop.css"type="text/css"/>
<script>
$.uimg={
draw:function(node){
varuimg=$(node);
$.uimg.make_iframe(uimg);
uimg.bind("click.uimg",function(){
varuimg=$(this);
varfile=this.uiframe.contents().find("input[type=file]");
file.bind("change",function(){
$.uimg_node=uimg;
file.parents("form:first").submit();
});
file.click();
});
},
callback:function(status,text,url){
varinput_class=$.uimg_node.attr("uimg");
varinput=null;
if(input_class.indexOf("parent.")==0){
input=$.uimg_node.parent().find(input_class.replace("parent.",""));
}else{
input=$(input_class);
}
input.val(url);
$("#imglink").append("<imgsrc='"+url+"'width='500'height='200'/>");
$("#user_preview_img").attr("src",url);
$("#user_preview_img").css("display","block");
//$("a#piclink").attr("href",url);
//window.parent.alertMsg.correct('上传成功');
////jcrop头像裁剪
//恢复form
$.uimg.make_iframe($.uimg_node);
},
make_iframe:function(uimg){
try{$(uimg)[0].uiframe.remove();}catch(e){}
varurl="http://localhost:8080/springmvc/uimg/xuan?callback=parent.jQuery.uimg.callback";
variframe=$("<iframeclass='uimg_iframe'style='display:none'></iframe>");
iframe.attr("src",url);
iframe.attr("frameborder",0);
//iframe.attr("width",0);
//iframe.attr("height",0);
$(top.document.body).append(iframe);
$(uimg)[0].uiframe=iframe;
}
}
$.fn.uimg=function(){
$.uimg.draw(this);
}
</script>
<script>
setTimeout(function(){
$("input[name=tg_position]").each(function(){
if($(this).val()=="$!tg_position"){
$(this).attr("checked","1");
}
});
vartg_content="$!tg_content";
tg_content_type=tg_content.substring(0,tg_content.indexOf(":"));
tg_content_txt=tg_content.substring(tg_content.indexOf(":")+1);
$("input[name=tg_content_type][value="+tg_content_type+"]").attr("checked","1");
$("input[name=tg_content_txt]").val(tg_content_txt);
$("input[uimg]").uimg();
},50);
functioninit_tg_content(o){
vartype=$(o).find("input[name=tg_content_type]:checked").val();
vartxt=$(o).find("input[name=tg_content_txt]").val();
$(o).find("input[name=tg_content]").val(type+":"+txt);
returntrue;
}
</script>
</head>
<body>
<p>上传演示</p>
<formonSubmit="returninit_tg_content(this)&&iframeCallback(this);"action="#"method="post"style="padding:10px;">
<pstyle="padding:3px0">
<label>显示内容：</label>
<imgsrc=""id="user_preview_img"/>
<inputtype="text"value="$!{tg_content_txt}"name="tg_content_txt"style="width:120px"/>
<inputtype="button"value="上传图片"uimg="parent.input[name=tg_content_txt]"/>
</p>
<p>
<inputtype="hidden"size="4"id="x1"name="x1"/>
<inputtype="hidden"size="4"id="y1"name="y1"/>
<inputtype="hidden"size="4"id="x2"name="x2"/>
<inputtype="hidden"size="4"id="y2"name="y2"/>
<inputtype="hidden"size="4"id="w"name="w"/>
<inputtype="hidden"size="4"id="h"name="h"/>
</p>
<inputtype="submit"value="提交"/>
</form>
</body>
</html>

iframe引用的上传页面：

[java] view plain copy print ?

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
</head>
<body>
<formaction="upload/file"method="post"enctype="multipart/form-data">
<inputtype="file"name="file"/>
<inputtype="submit"value="上传"/>
</form>
</body>
</html>

上传java类：

[java] view plain copy print ?

packagecom.app.controller;
importjava.awt.Graphics;
importjava.awt.Image;
importjava.awt.Toolkit;
importjava.awt.image.BufferedImage;
importjava.awt.image.CropImageFilter;
importjava.awt.image.FilteredImageSource;
importjava.awt.image.ImageFilter;
importjava.io.File;
importjava.io.IOException;
importjava.io.InputStream;
importjava.io.OutputStream;
importjava.io.PrintWriter;
importjavax.imageio.ImageIO;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.commons.io.FilenameUtils;
importorg.springframework.stereotype.Controller;
importorg.springframework.ui.ModelMap;
importorg.springframework.web.bind.annotation.RequestMapping;
importorg.springframework.web.bind.annotation.RequestMethod;
importorg.springframework.web.bind.annotation.RequestParam;
importorg.springframework.web.bind.annotation.ResponseBody;
importorg.springframework.web.multipart.MultipartFile;
importorg.springframework.web.multipart.MultipartHttpServletRequest;
importorg.springframework.web.servlet.ModelAndView;
@Controller
publicclassUploadFilecontroller{
@RequestMapping(value="/uimg/xuan",method={RequestMethod.GET,RequestMethod.POST})
publicModelAndViewuploadimages(HttpServletRequestrequest,HttpServletResponseresponse){
ModelAndViewmav=newModelAndView();
System.out.println("00000000");
Stringcallback=request.getParameter("callback");
System.out.println("----"+callback);
mav.addObject("callback",callback);
mav.setViewName("/upload/uploadImages");
returnmav;
}
@RequestMapping(value="/upload/file",method={RequestMethod.GET,RequestMethod.POST})
publicStringuploadImages(@RequestParam(value="file",required=false)MultipartFilefile,
HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{
response.setContentType("text/html,charset=UTF-8");
PrintWriterout=response.getWriter();
ModelAndViewmav=newModelAndView();
Stringpath=request.getSession().getServletContext().getRealPath("images/uploadImages");
StringfileName=file.getOriginalFilename();
//StringfileName=newDate().getTime()+".jpg";
System.out.println(path);
FiletargetFile=newFile(path,fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//锟斤拷锟斤拷
try{
file.transferTo(targetFile);
}catch(Exceptione){
e.printStackTrace();
}
//model.addAttribute("fileUrl",request.getContextPath()+"/uploadImages/"+fileName);
StringurlString=request.getContextPath()+"/images/uploadImages/"+fileName;
mav.addObject("fileUrl",request.getContextPath()+"/images/uploadImages/"+fileName);
mav.setViewName("/upload/uploadSuccess");
System.out.println("==="+urlString);
Stringcallback=request.getParameter("callback");
System.out.println("-+++---"+callback);
StringBuildersb=newStringBuilder();
sb.append("<script>parent.jQuery.uimg.callback(true,'','http://localhost:8080"+urlString+"');</script>");
out.print(sb);
returnnull;
}
}