springMVC的Jquery的AJAX上传文件

单个文件

1.先看springMVC文件上传:https://www.cnblogs.com/kfsrex/p/11461914.html

2.在springMVC上传成功基础上,在jsp页面修改成ajax,ajax一定要加processData: false, contentType: false,

JSP页面的AJAX

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

       <form action="<c:url value='/user/upload'/>" method="post" enctype="multipart/form-data">

              userId:<input type="text" name="userId"/><br/>

              phone:<input type="file" name="myfile"/><br/>

              <input type="button" value="提交"/><br/>

       </form>

</body>

<script type="text/javascript" src="<c:url value='/js/jquery-3.2.1.min.js'/>"></script>

<script type="text/javascript">

      $("input[type='button']").click(function () {

              var formData=new FormData($("form")[0]);

              alert(formData);

             $.ajax({

                     url:"<c:url value='/user/upload'/>",

                     data:formData,

                     type:"post",

                     async:"false",

                     cache: false,

                    

                     processData: false,//一定要加

                     contentType: false,//一定要加

                    

                     success:function(rd){

                            alert(rd);

                     }

              });

       });

</script>

</html>

 

3.CONTROLLER层和springMVC单个文件上传一样接收保存

 

多个文件

1.页面在ajax单个文件上传成功基础上,只需在type="file"上添加属性multiple="multiple"

2.CONTROLLER层和springMVC多个文件上传一样接收保存

上一篇:二次封装饿了吗表单组件


下一篇:表单序列化对象,jquery