您的位置: 首页  >  文章  >  跨域上传的简单例子

跨域上传的简单例子

分类: 文章 • 2024-04-06 16:24:31

上传代码的重用性

在springmvc基础上处理上传

上传图片预览

上传jsp页面：

[java] view plaincopyprint?跨域上传的简单例子跨域上传的简单例子
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  7. <title>Inserttitlehere</title>
  9. <scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  10. <scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  11. <scriptsrc="js/jquery.Jcrop.min.js"></script>
  12. <linkrel="stylesheet"href="css/jquery.Jcrop.css"type="text/css"/>
  13. <script>
  14. $.uimg={
  15. draw:function(node){
  16. varuimg=$(node);
  18. $.uimg.make_iframe(uimg);
  20. uimg.bind("click.uimg",function(){
  21. varuimg=$(this);
  22. varfile=this.uiframe.contents().find("input[type=file]");
  23. file.bind("change",function(){
  24. $.uimg_node=uimg;
  25. file.parents("form:first").submit();
  26. });
  27. file.click();
  28. });
  29. },
  30. callback:function(status,text,url){
  31. varinput_class=$.uimg_node.attr("uimg");
  32. varinput=null;
  33. if(input_class.indexOf("parent.")==0){
  34. input=$.uimg_node.parent().find(input_class.replace("parent.",""));
  35. }else{
  36. input=$(input_class);
  37. }
  38. input.val(url);
  39. $("#imglink").append("<imgsrc='"+url+"'width='500'height='200'/>");
  40. $("#user_preview_img").attr("src",url);
  41. $("#user_preview_img").css("display","block");
  42. //$("a#piclink").attr("href",url);
  43. //window.parent.alertMsg.correct('上传成功');
  45. ////jcrop头像裁剪
  47. //恢复form
  48. $.uimg.make_iframe($.uimg_node);
  49. },
  50. make_iframe:function(uimg){
  51. try{$(uimg)[0].uiframe.remove();}catch(e){}
  52. varurl="http://localhost:8080/springmvc/uimg/xuan?callback=parent.jQuery.uimg.callback";
  53. variframe=$("<iframeclass='uimg_iframe'style='display:none'></iframe>");
  54. iframe.attr("src",url);
  55. iframe.attr("frameborder",0);
  56. //iframe.attr("width",0);
  57. //iframe.attr("height",0);
  58. $(top.document.body).append(iframe);
  59. $(uimg)[0].uiframe=iframe;
  60. }
  61. }
  62. $.fn.uimg=function(){
  63. $.uimg.draw(this);
  64. }
  65. </script>
  67. <script>
  68. setTimeout(function(){
  69. $("input[name=tg_position]").each(function(){
  70. if($(this).val()=="$!tg_position"){
  71. $(this).attr("checked","1");
  72. }
  73. });
  75. vartg_content="$!tg_content";
  76. tg_content_type=tg_content.substring(0,tg_content.indexOf(":"));
  77. tg_content_txt=tg_content.substring(tg_content.indexOf(":")+1);
  78. $("input[name=tg_content_type][value="+tg_content_type+"]").attr("checked","1");
  79. $("input[name=tg_content_txt]").val(tg_content_txt);
  81. $("input[uimg]").uimg();
  82. },50);
  83. functioninit_tg_content(o){
  84. vartype=$(o).find("input[name=tg_content_type]:checked").val();
  85. vartxt=$(o).find("input[name=tg_content_txt]").val();
  86. $(o).find("input[name=tg_content]").val(type+":"+txt);
  87. returntrue;
  88. }
  89. </script>
  93. </head>
  94. <body>
  95. <p>上传演示</p>
  96. <formonSubmit="returninit_tg_content(this)&&iframeCallback(this);"action="#"method="post"style="padding:10px;">
  97. <pstyle="padding:3px0">
  98. <label>显示内容：</label>
  99. <imgsrc=""id="user_preview_img"/>
  100. <inputtype="text"value="$!{tg_content_txt}"name="tg_content_txt"style="width:120px"/>
  101. <inputtype="button"value="上传图片"uimg="parent.input[name=tg_content_txt]"/>
  102. </p>
  103. <p>
  104. <inputtype="hidden"size="4"id="x1"name="x1"/>
  105. <inputtype="hidden"size="4"id="y1"name="y1"/>
  106. <inputtype="hidden"size="4"id="x2"name="x2"/>
  107. <inputtype="hidden"size="4"id="y2"name="y2"/>
  108. <inputtype="hidden"size="4"id="w"name="w"/>
  109. <inputtype="hidden"size="4"id="h"name="h"/>
  110. </p>
  111. <inputtype="submit"value="提交"/>
  112. </form>
  113. </body>
  114. </html>


iframe引用的上传页面：

[java] view plaincopyprint?跨域上传的简单例子跨域上传的简单例子
  1. <%@pagelanguage="java"contentType="text/html;charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
  7. <title>Inserttitlehere</title>
  8. </head>
  9. <body>
  10. <formaction="upload/file"method="post"enctype="multipart/form-data">
  11. <inputtype="file"name="file"/>
  12. <inputtype="submit"value="上传"/>
  13. </form>
  14. </body>
  15. </html>



上传java类：
[java] view plaincopyprint?跨域上传的简单例子跨域上传的简单例子
  1. packagecom.app.controller;
  3. importjava.awt.Graphics;
  4. importjava.awt.Image;
  5. importjava.awt.Toolkit;
  6. importjava.awt.image.BufferedImage;
  7. importjava.awt.image.CropImageFilter;
  8. importjava.awt.image.FilteredImageSource;
  9. importjava.awt.image.ImageFilter;
  10. importjava.io.File;
  11. importjava.io.IOException;
  12. importjava.io.InputStream;
  13. importjava.io.OutputStream;
  14. importjava.io.PrintWriter;
  16. importjavax.imageio.ImageIO;
  17. importjavax.servlet.http.HttpServletRequest;
  18. importjavax.servlet.http.HttpServletResponse;
  21. importorg.apache.commons.io.FilenameUtils;
  22. importorg.springframework.stereotype.Controller;
  23. importorg.springframework.ui.ModelMap;
  24. importorg.springframework.web.bind.annotation.RequestMapping;
  25. importorg.springframework.web.bind.annotation.RequestMethod;
  26. importorg.springframework.web.bind.annotation.RequestParam;
  27. importorg.springframework.web.bind.annotation.ResponseBody;
  28. importorg.springframework.web.multipart.MultipartFile;
  29. importorg.springframework.web.multipart.MultipartHttpServletRequest;
  30. importorg.springframework.web.servlet.ModelAndView;
  34. @Controller
  35. publicclassUploadFilecontroller{
  38. @RequestMapping(value="/uimg/xuan",method={RequestMethod.GET,RequestMethod.POST})
  39. publicModelAndViewuploadimages(HttpServletRequestrequest,HttpServletResponseresponse){
  40. ModelAndViewmav=newModelAndView();
  41. System.out.println("00000000");
  42. Stringcallback=request.getParameter("callback");
  43. System.out.println("----"+callback);
  44. mav.addObject("callback",callback);
  45. mav.setViewName("/upload/uploadImages");
  46. returnmav;
  47. }
  49. @RequestMapping(value="/upload/file",method={RequestMethod.GET,RequestMethod.POST})
  50. publicStringuploadImages(@RequestParam(value="file",required=false)MultipartFilefile,
  51. HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{
  53. response.setContentType("text/html,charset=UTF-8");
  54. PrintWriterout=response.getWriter();
  55. ModelAndViewmav=newModelAndView();
  56. Stringpath=request.getSession().getServletContext().getRealPath("images/uploadImages");
  57. StringfileName=file.getOriginalFilename();
  58. //StringfileName=newDate().getTime()+".jpg";
  59. System.out.println(path);
  60. FiletargetFile=newFile(path,fileName);
  61. if(!targetFile.exists()){
  62. targetFile.mkdirs();
  63. }
  65. //锟斤拷锟斤拷
  66. try{
  67. file.transferTo(targetFile);
  68. }catch(Exceptione){
  69. e.printStackTrace();
  70. }
  71. //model.addAttribute("fileUrl",request.getContextPath()+"/uploadImages/"+fileName);
  72. StringurlString=request.getContextPath()+"/images/uploadImages/"+fileName;
  73. mav.addObject("fileUrl",request.getContextPath()+"/images/uploadImages/"+fileName);
  74. mav.setViewName("/upload/uploadSuccess");
  75. System.out.println("==="+urlString);
  76. Stringcallback=request.getParameter("callback");
  77. System.out.println("-+++---"+callback);
  78. StringBuildersb=newStringBuilder();
  79. sb.append("<script>parent.jQuery.uimg.callback(true,'','http://localhost:8080"+urlString+"');</script>");
  81. out.print(sb);
  82. returnnull;
  84. }
  87. }

上传页面效果图：

跨域上传的简单例子

上传成功预览：

跨域上传的简单例子

相关推荐