ajax异步跨服上传图片-白红宇

ajax异步跨服上传图片

阅读量：5879 次

发布时间：2019-06-19

本文共 2369 字，大约阅读时间需要 7 分钟。

环境配置

1.导入jar包

commos-io

commos-fileupload

jersey框架包

2.配置文件上传解析器

springmvc.xml

注意：id一定要配置，底层通过id找解析器

3.创建新项目作为图片存储服务器

1.创建新tomcat服务器

2.修改端口

4.修改服务器写入权限

Serverts/Tomcat/web.xml

添加readonly：false


        
     
      default
         
     
      org.apache.catalina.servlets.DefaultServlet
         
             
      
       readonly
              
      
       false

页面编写

1.表单

请上传图片的大小不超过3MB

2.定义ajax异步函数

2.1导入并引入js

jquery.js

jquery.form.js

注意导入顺序，先导入jQuery再导入jQuery.form

2.2使用ajax上传图片

function submitImgSize1Upload(){//上传图片流程：把图片流对象，放入request//图片对象在表单中，提交表单//ajax提交表单：$.post()var option = {		type:'post',		url:'${pageContext.request.contextPath }/uploadPic.do',		dataType:'text',		data:{			fileName:'imgSize1File'		},		success:function(data){			//把json格式字符串转换成对象			var obj = $.parseJSON(data);			//图片回显，把图片地址设置img标签即可，图片里面回显			$("#imgSize1ImgSrc").attr("src",obj.fullPath);			//给input隐藏域标签设置一个图片服务器地址，提交保存数据库			$("#imgSize1").val(obj.fullPath);		}	};	//提交表单	$("#itemForm").ajaxSubmit(option);}

上传控制类

1.获取名称及扩展名

2.定义随机文件名

3.使用jesery客户端上传图片

4.图片回显

@RequestMapping("/upload/uploadPic")public void upload(HttpServletRequest request,String fileName,PrintWriter out){	System.out.println("1");	//把request转换成多部件请求对象	MultipartHttpServletRequest mh = (MultipartHttpServletRequest)request;	//根据文件name属性名称获取文件对象	CommonsMultipartFile file = (CommonsMultipartFile) mh.getFile(fileName);	//获取名称	String originalFilename = file.getOriginalFilename();	//截取获取文件扩展名	String extName = originalFilename.substring(originalFilename.lastIndexOf("."));		//使用毫秒+随机数定义文件名	long currentTimeMillis = System.currentTimeMillis();	//定义保存的文件名	String fn = currentTimeMillis+"";	//添加随机数	Random random = new Random();	for(int i =0 ;i < 4; i++){		fn += random.nextInt(10);	}	//添加扩展名	fn += extName;		//上传文件	//跨服务器上传文件，使用jesery客户端	Client client = Client.create();	//指定远程服务器绝对路径	WebResource resource = client.resource(Constants.IMAGE_HOST+"upload/"+fn);	//上传文件	resource.put(String.class,file.getBytes());		//图片回显	//把远程图片服务图片地址返回给页面ajax解析	//获得图片地址	String fullPath = Constants.IMAGE_HOST+"upload/"+fn;	//将地址封装到json中去	String jsonResult = "{\"fullPath\":\""+fullPath+"\"}";	//将jsonResult打印出去	out.println(jsonResult);}