上传代码的重用性
在springmvc基础上处理上传
上传图片预览
上传jsp页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.Jcrop.min.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script>
$.uimg = {
draw: function(node){
var uimg = $(node);
$.uimg.make_iframe(uimg);
uimg.bind("click.uimg", function(){
var uimg = $(this);
var file = 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){
var input_class = $.uimg_node.attr("uimg");
var input = 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("<img src='"+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){}
var url = "http://localhost:8080/springmvc/uimg/xuan?callback=parent.jQuery.uimg.callback";
var iframe = $("<iframe class='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");
}
});
var tg_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);
function init_tg_content(o){
var type = $(o).find("input[name=tg_content_type]:checked").val();
var txt = $(o).find("input[name=tg_content_txt]").val();
$(o).find("input[name=tg_content]").val(type+":"+txt);
return true;
}
</script>
</head>
<body>
<p>上传演示</p>
<form onSubmit="return init_tg_content(this) && iframeCallback(this);" action="#" method="post" style="padding: 10px;">
<p style="padding:3px 0">
<label>显示内容:</label>
<img src="" id="user_preview_img" />
<input type="text" value="$!{tg_content_txt}" name="tg_content_txt" style="width:120px" />
<input type="button" value="上传图片" uimg="parent.input[name=tg_content_txt]" />
</p>
<p>
<input type="hidden" size="4" id="x1" name="x1" />
<input type="hidden" size="4" id="y1" name="y1" />
<input type="hidden" size="4" id="x2" name="x2" />
<input type="hidden" size="4" id="y2" name="y2" />
<input type="hidden" size="4" id="w" name="w" />
<input type="hidden" size="4" id="h" name="h" />
</p>
<input type="submit" value="提交" />
</form>
</body>
</html>
iframe引用的上传页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="/springmvc/upload/file" method="post" enctype="multipart/form-data">
<input type="file" name="file" />
<input type="hidden" name="callback" value="$!{callback}"/>
<input type="submit" value="上传" />
</form>
</body>
</html>
上传java类:
package com.app.controller;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.FilenameUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.servlet.ModelAndView;
@Controller
public class UploadFilecontroller {
@RequestMapping(value="/uimg/xuan",method = {RequestMethod.GET,RequestMethod.POST})
public ModelAndView uploadimages(HttpServletRequest request,HttpServletResponse response){
ModelAndView mav=new ModelAndView();
System.out.println("00000000");
String callback=request.getParameter("callback");
System.out.println("----"+callback);
mav.addObject("callback", callback);
mav.setViewName("/upload/uploadImages");
return mav;
}
@RequestMapping(value="/upload/file",method = {RequestMethod.GET,RequestMethod.POST})
public String uploadImages(@RequestParam(value = "file", required = false) MultipartFile file,
HttpServletRequest request, HttpServletResponse response) throws IOException {
response.setContentType("text/html,charset=UTF-8");
PrintWriter out=response.getWriter();
ModelAndView mav =new ModelAndView();
String path = request.getSession().getServletContext().getRealPath("images/uploadImages");
String fileName = file.getOriginalFilename();
// String fileName = new Date().getTime()+".jpg";
System.out.println(path);
File targetFile = new File(path, fileName);
if(!targetFile.exists()){
targetFile.mkdirs();
}
//锟斤拷锟斤拷
try {
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
}
//model.addAttribute("fileUrl", request.getContextPath()+"/uploadImages/"+fileName);
String urlString=request.getContextPath()+"/images/uploadImages/"+fileName;
mav.addObject("fileUrl", request.getContextPath()+"/images/uploadImages/"+fileName);
mav.setViewName("/upload/uploadSuccess");
System.out.println("==="+urlString);
String callback=request.getParameter("callback");
System.out.println("-+++---"+callback);
StringBuilder sb = new StringBuilder();
sb.append("<script>parent.jQuery.uimg.callback(true, '', 'http://localhost:8080"+urlString+"');</script>");
out.print(sb);
return null;
}
}
上传页面效果图:
上传成功预览: