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

近期的项目里需要在前端上传图片后端接收处理。前端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则会出现上述异常提示。

时间: 2024-12-24 22:57:32

Jersey后端服务接收ajax前端的图片上传的相关文章

在 PHP 中结合 Ajax 技术进行图片上传

前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Ajax 技术. 本例将要实现这样的效果:当用户选择图片,开始上传后,后台上传完成时,随即会显示到当前页面.由于,从开始上传到上传完成,再到图片显示均在一个页面上 完成(从表面上看).所以使用 Ajax 技术是必须的.但如何使用这些操作在一个页面上来完成呢?考虑到这样的情况,当文件开始上传后,便开始打开

PHP+jQuery+Ajax实现多图片上传介绍

PHP+jQuery+Ajax实现多图片上传介绍: 本文中用到一个Ajax表单提交插件:jqery.form.js,有高人修改了几行代码并改名为:jquery.wallform.js,直接拿来用. 下面就来就来介绍一下这一款功能强大的插件的使用,需要的朋友可以做一下参考. 在不刷新页面的前提下,使用PHP+jQuery+Ajax实现多图片上传的效果.用户只需要点击选择要上传的图片,然后图片自动上传到服务器上并展示在页面上,效果图如下: 一.HTML代码: 在页面上放置一个form表单,使用pos

php:利用插件uploadify完成ajax效果的图片上传

可选项需要参数类型 参数名字 解释(布尔型) auto 当文件被添加到队列时,自动上传.(字符串) buttonImg 浏览按钮的背景图片路径.(字符串)   buttonText  默认在按钮上显示的文本.(字符串)  cancelImg    取消按钮的背景图片路径.(字符串)   checkScript   用以检查服务器上已存在文件的后台脚本的路径.[译者注:应该是ajax方式](字符串)   displayData   在上传过程中显示在队列里的数据类型.(字符串)   express

前端模拟 图片上传----&gt;&gt;通过选取的图片获取其路径&lt;&lt;------

<head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: relative; overflow: hidden; background: #EEE; width: 100%; height: 667px; } #bg, #mask-bg { position: absolute; width: 100%; height: 667px;

百度ueditor的图片上传,前后端交互使用

百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor.config.js即可.这里就不多说. 至于图片上传,ueditor 设计的时候是考虑和后端交互的,所以会看到可以下载什么php,java版本,还有很多网上会说道有什么后端配置文件,改那改这的,但是实际上后端存储业务是按照公司实际来的,实践起来并不顺利. 本文重点讲述的只用前端文件和ueditor.

summernote 图片上传

<script type="text/javascript"> $(document).ready(function () { function sendFile(file, editor, $editable) { var formData = new FormData(); formData.append('file', file); // XMLHttpRequest 对象 var xhr = new XMLHttpRequest(); xhr.open("

微信小程序开发(二)图片上传+服务端接收

文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/54312573 前几天做了图片上传功能,被坑了一下.我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的php,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的

[项目构建 五]babasport ajax图片上传及FastDFS入门案例.

今天来开始写图片上传的功能, 现在的图片上传都讲求 上传完成后立刻回显且页面不刷新, 这里到底是怎么做的呢? 当然是借助于ajax了, 但是ajax又不能提交表单, 这里我们还要借助一个插件: jquery.form.js剩下的一个是FastDFS, 那么什么是FastDFS呢? FastDFS是一个开源的轻量级分布式文件系统,由跟踪服务器(tracker server).存储服务器(storage server)和客户端(client)三个部分组成,主要解决了海量数据存储问题,特别适合以中小文

在ASP.NET MVC下实现单个图片上传, 客户端服务端双重限制图片大小和格式, 服务端裁剪图片

在"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"一文中,使用JSAjaxFileUploader这款插件实现了单文件上传,在chrome, firefox下运行良好,但在某些版本的IE浏览器(比如IE8,IE9)下却无法正常运行,这可能是因为JSAjaxFileUploader插件在编写时没有考虑到某些低版本IE浏览器导致的.本篇,就在ASP.NET MVC4下实现单个图片上传,具体功能包括: 1.在客户端选择图片,并限