spring mvc上传怎么用ajax

准备工作:

前端引入:1、jquery，我在这里用的是：jquery-1.10.2.min.js

2、ajaxfileupload.js

这里可能会报一些错，所以在json判断那里修改为（网上也有）：

Js代码

if ( type == "json" ){

data = r.responseText

var start = data.indexOf(">")

if(start != -1) {

var end = data.indexOf("<", start + 1)

if(end != -1) {

data = data.substring(start + 1, end)

}

}

eval( "data = " + data )

}

末尾那里补充一段：

Js代码

handleError: function( s, xhr, status, e ) {

if ( s.error ) {

s.error.call( s.context || window, xhr, status, e )

}

if ( s.global ) {

(s.context ? jQuery(s.context) : jQuery.event).trigger ( "ajaxError", [xhr, s, e] )

}

}

后台导入spring的jar包，我这里用的是：spring3.0.5

在spring.xml里配置如下：

Xml代码

<!-- SpringMVC上传文件时，需要配置MultipartResolver处理器 -->

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

<property name="defaultEncoding" value="UTF-8"/>

<!-- 指定所上传文件的总大小不能超过200KB。注意maxUploadSize属性的限制不是针对单个文件，而是所有文件的容量之和 -->

<!-- 不在这里限制了,后台各自进行限制了

<property name="maxUploadSize" value="2000000"/>

-->

</bean>

<!-- SpringMVC在超出上传文件限制时，会抛出org.springframework.web.multipart.MaxUploadSizeExceededException -->

<!-- 该异常简脊是SpringMVC在检查上传的文件信息时抛出来的轮桥，而且此时还没有进入到Controller方法中 -->

<bean id="exceptionResolver" class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">

<property name="exceptionMappings">

<props>

<!-- 遇到MaxUploadSizeExceededException异常时，跳转到/page/html/errorGolbal.html页面 -->

<prop key="org.springframework.web.multipart.MaxUploadSizeExceededException">/page/html/errorGolbal.html</prop>

</props>

</property>

</bean>

这里就充分利用框架的便利性帮你都拦桐渗做好了，如果你不在xml里配置这些，

那么在controller那里，request.getInputStream()得到的这个流不全是文件流，还包含了其他，需要你自己编码去解析，当

然，要解析的话还要知道http相关报文解析知识，所以这里可以充分利用框架的便利性，有兴趣的可以研究下

好了，准备工作做好了，看下前端的具体代码：

Html代码

<div id="fileUpLoad" class="manage">

添附文件

<!-- 自定义 <input type="file"/>-->

<input type="file" id="btnFile" name="btnFile" onchange="txtFoo.value=this.valuecom.company.project.services.newCase.fileUpLoad()" hidden="hidden" />

<input type="text" id="txtFoo" readonly="readonly" style="width: 300px" />

<button onclick="btnFile.click()" style="height: 25px">选择文件</button>

</div>

js代码为：

Js代码

if (!window.com) {

window.com = {}

}

if (!window.com.company) {

window.com.company= {}

}

if (!window.com.company.project) {

window.com.company.project= {}

}

if (!window.com.company.project.services) {

window.com.company.project.services = {}

}

if (!window.com.company.project.services.newCase) {

window.com.company.project.services.newCase = {}

}

//生成随机guid数(参考网上)

com.company.project.services.newCase.getGuidGenerator = function() {

var S4 = function() {

return (((1+Math.random())*0x10000)|0).toString(16).substring(1)

}

return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4())

}

//上传文件

com.company.project.services.newCase.fileUpLoad = function(){

var fileName = $("#btnFile").val()//文件名

fileName = fileName.split("\\")

fileName = fileName[fileName.length-1]

var guid = com.company.project.services.newCase.getGuidGenerator()//唯一标识guid

var data = {guid:guid}

jQuery.ajaxSettings.traditional = true

$.ajaxFileUpload({

url : '/PROJECT/function.do?method=fileUpLoad',

secureuri : false,//安全协议

fileElementId:'btnFile',//id

type : 'POST',

dataType : 'json',

data:data,

async : false,

error : function(data,status,e) {

alert('Operate Failed!')

},

success : function(json) {

if (json.resultFlag==false){

alert(json.resultMessage)

}else{

alert('文件上传成功!')

var next = $("#fileUpLoad").html()

$("#fileUpLoad").html("<div id='"+guid+"'>"+"文件:"+fileName+" <a href='#' onclick='com.company.project.services.newCase.filedelete("+"\""+guid+"\""+","+"\""+fileName+"\""+")'>删除</a>"+"<br/></div>")

$("#fileUpLoad").append(next)

}

}

})

}

//文件删除

com.company.project.services.newCase.filedelete = function(guid,fileName){

jQuery.ajaxSettings.traditional = true

var data = {guid:guid,fileName:fileName}

$.ajax({

url : '/PROJECT/function.do?method=filedelete',

type : 'POST',

dataType : 'json',

data:data,

async : false,

error : function() {

alert('Operate Failed!')

},

success : function(json) {

if (json.resultFlag==false){

alert(json.resultMessage)

}else{

alert('删除成功!')

$("#"+guid).remove()

}

}

})

}

----------------------------------------------------------------------------------

注：如果你对ajax不熟悉，或者由于浏览器等原因，致使上述方式提交出现各种问题，那么你可以用form表单形式提交,代码片段如下：

Html代码

<div id="fileUpLoad" class="manage">

<form id="needHide" action="/工程/function.do?method=fileUpLoad" method="post" enctype="multipart/form-data" target = "hidden_frame">

<!-- 自定义 <input type="file"/>-->

<input type="file" id="btnFile" name="btnFile" onchange="txtFoo.value=this.valuecom.company.project.services.newCase.fileUpLoad()" hidden="hidden"/>

</form>

添附文件

<input type="text" id="txtFoo" readonly="readonly" style="width: 300px" />

<button onclick="btnFile.click()" style="height: 25px">选择文件</button>

<iframe name='hidden_frame' id="hidden_frame" style='display: none' onload="com.company.project.services.newCase.statusCheck()"></iframe>

</div>

js代码写为:

Js代码

var flag = true

com.company.project.services.newCase.statusCheck = function(){

if(flag == false){

var status = hidden_frame.window.document.getElementById("hideForm").innerHTML

console.log(status)

}

flag = false

}

//上传文件

com.company.project.services.newCase.fileUpLoad = function(){

$("#needHide").submit()

}

后台代码主要在最后变为:

Java代码

PrintWriter printWriter = response.getWriter()

printWriter.write("<div id='hideForm'>1111</div>")

----------------------------------------------------------------------------------

后台对应java代码段为：

Java代码

@RequestMapping(params = "method=fileUpLoad")

//btnFile对应页面的name属性

public void fileUpLoad(@RequestParam MultipartFile[] btnFile, HttpServletRequest request, HttpServletResponse response){

try{

//文件类型:btnFile[0].getContentType()

//文件名称:btnFile[0].getName()

if(btnFile[0].getSize()>Integer.MAX_VALUE){//文件长度

OutputUtil.jsonArrOutPut(response, JSONArray.fromObject("上传文件过大!"))

}

InputStream is = btnFile[0].getInputStream()//多文件也适用,我这里就一个文件

//String fileName = request.getParameter("fileName")

String guid = request.getParameter("guid")

byte[] b = new byte[(int)btnFile[0].getSize()]

int read = 0

int i = 0

while((read=is.read())!=-1){

b[i] = (byte) read

i++

}

is.close()

OutputStream os = new FileOutputStream(new File("D://"+guid+"."+btnFile[0].getOriginalFilename()))//文件原名,如a.txt

os.write(b)

os.flush()

os.close()

OutputUtil.jsonOutPut(response, null)

}catch (Exception e) {

OutputUtil.errorOutPut(response, "系统异常")

}

}

@RequestMapping(params = "method=filedelete")

public void filedelete(HttpServletRequest request, HttpServletResponse response){

try{

String guid = request.getParameter("guid")

String fileName = request.getParameter("fileName")

File file = new File("D://"+guid+"."+fileName)

boolean isDeleted = file.delete()

if(!isDeleted){

OutputUtil.errorOutPut(response, "文件删除失败")

}

OutputUtil.jsonArrOutPut(response, null)

}catch (Exception e) {

OutputUtil.errorOutPut(response, "系统异常")

}

}

另外：如果是图片上传的话，你也可以不保存在什么临时目录，可以用base64进行编解码，网上也有很多，简单介绍下：

后台只要这么做：

Java代码

//得到byte数组后

BASE64Encoder base64e = new BASE64Encoder()

JSONArray ja = new JSONArray()

String base64Str = base64e.encode(b)

ja.add(base64Str)

OutputUtil.jsonArrOutPut(response, JSONArray.fromObject(ja))

前台页面只要这么就可以拿到了：

Html代码

$("#fileUpLoad")

.append("<image src='"+"data:image/gifbase64,"+json.resultMessage[0]+"' >")

对于json相关不大了解的可以参考我的博文:

http://quarterlifeforjava.iteye.com/blog/2024336

效果和iteye的相似：

补充：如果要让表单提交后还是留在当前页面，除了Ajax还可以用iframe，代码如下：

其实关键就是iframe和form中的target

springmvc中ajax无法解析json1. @RequestBody:将请求体中的内容和控制器方法的形参进行绑定闭指闷

2. 使用@RequestBody注解将json格式的请求参数转换程Java对象(三个步骤) a>导入逗镇Jackson的依赖 b>在轿弯SpringMVC的配置文件中设置开启mvc的注解驱动:mvc:annotation-

3. @ResponseBody:将所标识的控制器方法返回值作为响应报文的响应体响应到浏览器

你文件上传用的什么方式

如果是submit直接提交的需谈知要给form加一穗带个属性：enctype="multipart/form-data"

如果是异步提交则需要看你的上传控件的ID是猜侍芦否正确

---