跨域上传的简单例子

最新推荐文章于 2023-09-03 22:12:43 发布

iteye_8029

最新推荐文章于 2023-09-03 22:12:43 发布

阅读量109

点赞数

文章标签： javascript java ui ViewUI

上传代码的重用性

在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;
        
    }
    

}

上传页面效果图：

上传成功预览：

iteye_8029

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域上传的简单例子

上传代码的重用性在springmvc基础上处理上传上传图片预览上传jsp页面：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transi...
复制链接

扫一扫