您的位置：首页 > 其它

ajax提交包含file的表单

2016-04-13 11:49 323 查看

本项目基于spring mvc框架，是一个maven项目；

主要是利用FormData来提交表单；

首先在pom.xml加入依赖：

项目代码：http://download.csdn.net/detail/liujan511536/9489630

<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>4.2.1.RELEASE</version>
</dependency>
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.3.2</version>
</dependency>
<dependency>
<groupId>servlet-api</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
</dependency>

然后在applicaitonContext.xml中加入：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8" />
<property name="maxUploadSize" value="5000000" />
</bean>

前端jsp代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form method="POST" enctype="multipart/form-data"
action="/uploadfile.html" id="info">
file:<input type="file" name="file" id="file"><br/>
name:<input type="text" name="name" value="hello world" id="name"/> <br>
</form>
<button id="button">upload</button>
</body>

<script>
$("#button").click(function(){
var formData = new FormData();
formData.append("name", 'hello world');
formData.append("file", $("#file")[0].files[0]);
var url = "uploadfile.html";
$.ajax({
url:url,
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(data) {
alert("success" + data);
},
error:function(data) {
alert("error");
}
});
});

</script>
</html>

后台controlelr代码：

package com.liujan.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
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.MultipartRequest;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import java.io.File;

/**
* Created by liujan on 4/12/16.
*/
@Controller
public class HelloController {
@RequestMapping(value = "/")
public String show() {
return "upload";
}

@RequestMapping(value = "uploadfile.html " )
@ResponseBody
public String upload(HttpServletRequest request, @RequestParam("file") MultipartFile file,
@RequestParam("name") String name) {
if (name != null) {
String fileName = file.getOriginalFilename();
System.out.println("name:" + name + " file:" + fileName);
}

return "good";
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航