ajax提交包含file的表单

最新推荐文章于 2023-03-31 15:31:34 发布

sysu安仔

最新推荐文章于 2023-03-31 15:31:34 发布

阅读量1k

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/liujan511536/article/details/51141893

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本项目基于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";
    }
}

sysu安仔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax提交包含file的表单

本项目基于spring mvc框架，是一个maven项目；主要是利用FormData来提交表单；首先在pom.xml加入依赖： org.springframework spring-webmvc 4.2.1.RELEASE commons-fileuplo
复制链接

扫一扫