1. 程式人生 > >ajax提交包含file的表單

ajax提交包含file的表單

本專案基於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";
    }
}