Ajax上传带有普通input和文件的表单Form

最新推荐文章于 2021-03-23 08:04:46 发布

独行侠梦

最新推荐文章于 2021-03-23 08:04:46 发布

阅读量573

点赞数

分类专栏： js方面文章标签： ajax 表单

本文链接：https://blog.youkuaiyun.com/u012811805/article/details/71598547

版权

js方面专栏收录该内容

10 篇文章

订阅专栏

前台

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

<script type="text/javascript" src="${pageContext.request.contextPath }/static/jquery/jquery-1.8.3.js"></script>
</head>
<body>
<form id="userForm">
    <p>姓名：<input id="uname" type="text" name="userName" /></p>
    <p>头像：<input type="file" name="file" />
    <button type="button" value="保存" onclick="save()">出来把</button>
</form>

<script type="text/javascript">
    /* 保存 */
    function save() {
        //[0]表示获取原生对象
        var formData = new FormData($("#userForm")[0]);
        //还可以手动添加自定义字段，如下：
//        formData.append("name", "发达是否");
        var name = $("#uname").val();
        formData.append("name", name);

        $.ajax({
            url : '${pageContext.request.contextPath}/a/shApply/update',
            type : 'POST',
            data : formData,
            async : false,
            cache : false,
            contentType : false,// 告诉jQuery不要去设置Content-Type请求头
            processData : false,// 告诉jQuery不要去处理发送的数据
            success : function(data) {
                alert(data);
                //...
            },
            error : function(data) {
                alert(data);
                //...
            }
        });
    }
</script>

</body>
</html>

后台

@Controller
@RequestMapping(value = "a/shApply")
public class ShApplyController extends BaseController {
    @RequestMapping(value = "update")
    @ResponseBody
    public String update(HttpServletRequest request, @RequestParam(value = "file", required = false) 
    MultipartFile file,
            String name) {
        System.out.println(name);
        return null;
        }