近期的项目里需要在前端上传图片后端接收处理。前端JSP页面使用Ajax上传图片后端使用Jersey框架提供restful接口接收处理图片。

一、前端的处理

jsp页面中图片上传没有使用form表单而是直接使用file类型的input控件

<input type="file" name="file" class="inpTxtA" value="" id="appLogo"/>
<input class="inpTxtA" value="" id="appID"/>

js中使用ajax处理文件上传

var formData = new FormData();//使用formData来上传数据
                              //content-Type是form-data类型
formData.append("appId", $("#appID").val());
formData.append("file", $("#appLogo")[0].files[0]);//取file类型input中的文件

$.ajax({
	method : "POST",
	url : "/apps/updateApp",
	timeout : 10000, //超时时间设置单位毫秒
	crossDomain: true,
	async: false,
	headers: {
	    "client-type":"platform"
	},
	dataType:"json",
	data: formData,
	contentType:false,//
	processData:false,//数据不做预处理
	success : function(response) {
		alert(response.msg);
		return;
	},
	error : function(e) {
		alert(response.msg);
		return;
	}
});

二、服务端处理

服务端使用jersey框架提供restful接口因为数据是以form-data的参数类型来传递的所以服务端接口中的参数类型要指定为@FormDataParam。

/**应用信息更新
*文件以InputStream类型上传
*文件描述信息以FormDataContentDisposition对象封装。
*/
@Path("updateApp")
@POST
@Consumes(MediaType.MULTIPART_FORM_DATA)
public Response updateApp(@FormDataParam("file") InputStream inputStream
            ,@FormDataParam("file") FormDataContentDisposition cp 
            ,@FormDataParam("appId")String appId){
    String name = cp.getFileName();
    try{
        name = new String(name.getBytes("ISO-8859-1"),"UTF-8");
    }catch(Exception e){
        result.put("errcode", 1);
    	result.put("msg", "应用图标名称异常");
    	return JSONUtil.toJSONResponse(result);
    }
    ...//进一步处理
}

三、可能出现的异常

1、在开发过程中前端对FormData的封装可能会出现问题提示invocation TypeError之类的异常。一般的原因是没有添加这两个参数

contentType:false,//
processData:false,//数据不做预处理

这两个参数申明不对数据做预处理。如果缺失那么前端在封装数据时会进行预处理比如x-www-form-urlencoded会将参数封装到url里面对于formData类型的数据预处理可能会出现封装异常。

2、后端服务接收参数时如果没有正确指定参数类型也可能会报如下异常

严重: A message body reader for Java class javax.servlet.http.HttpServletRequest, 
and Java type interface javax.servlet.http.HttpServletRequest, and MIME media 
type multipart/form-data;boundary=----WebKitFormBoundaryRJ7E8B7MDzDGjBHG 
was not found.
The registered message body readers compatible with the MIME media type are:
multipart/* ->
  com.sun.jersey.multipart.impl.MultiPartReaderServerSide
*/* ->
  com.sun.jersey.core.impl.provider.entity.FormProvider
  com.sun.jersey.core.impl.provider.entity.MimeMultipartProvider
  com.sun.jersey.core.impl.provider.entity.StringProvider

这是因为参数是以formData格式上传的如果接口中不指定参数类型为@FormDataParam则会出现上述异常提示。

Jersey后端服务接收ajax前端的图片上传