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";
    }
}

原文链接：/ajax/162294.html

ajax提交包含file的表单

猜你在找的Ajax相关文章