ajax提交包含file的表單
阿新 • • 發佈：2019-01-01
本專案基於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"; } }