跨域上传的简单例子
上传代码的重用性
在springmvc基础上处理上传
上传图片预览
上传jsp页面:
- <%@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引用的上传页面:
- <%@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>
- 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;
- }
- }
上传页面效果图:
上传成功预览: