ajax异步将前端文件上传到后台

最新推荐文章于 2024-05-09 14:38:11 发布

xiachannnn

最新推荐文章于 2024-05-09 14:38:11 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/qq_45871227/article/details/128044921

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目场景：

ajax异步将前端文件上传到后台

原因分析：

之前只会用$.get()、$.post() 发送异步请求，而这两种方式向后台传输的数据都会被处理为string类型，文件类型为MultipartFile类型，不能被转为String。所以可回退到使用$.ajax({})发送异步请求
使用$.ajax({})发送异步请求，除了要写url、data、success、dataType，还要把type写上。
另外，还需要设置下面两个属性
processData: false,//阻止jquery对formData数据进行加工处理
contentType: false,//阻止jquery修改formData数据的类型

解决方案：

1、使用

var file = $("input[name=avatar]")[0].files[0];//获取上传的文件
var formData = new FormData(); //新建一个formData对象,以表单的形式传参
formData.append("username", $("#username").val());
formData.append("password", $("input[name=password]").val());
formData.append("avatar", file);

向后台同时传输文件类型、String类型数据
2、使用$.ajax({})发送异步请求

所有代码如下：

<head>
    <title>注册</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
    <script>
        var msgIsOk = false;
        var usernameIsOk = false;
        //编程式事件添加
        $(function () {
            $("#username").change(function () {
                checkName();
            });

            $("input[type=button]").click(function () {
                submitForm();
            });
        });

        /*ajax验证用户名是否重复*/
        function checkName() {
            $.get(
                "${pageContext.request.contextPath}/user/checkUsernameDuplicate",
                "username=" + $("#username").val(),
                    function (result) {
                        var commonVo = result;

                        if (!commonVo.status) {
                            //注册信息不合法
                            usernameIsOk = false;
                            $("#username").after("<span style='color: red'>" + commonVo.message + "</span>");
                        } else {
                            usernameIsOk = true;
                            $("#username").after("<span style='color: green'>" + commonVo.message + "</span>");
                        }
                    },
                    "json"
            );
        }

        function submitForm() {
            var file = $("input[name=avatar]")[0].files[0];//获取上传的文件
            var formData = new FormData(); //新建一个formData对象,以表单的形式传参
            formData.append("username", $("#username").val());
            formData.append("password", $("input[name=password]").val());
            formData.append("avatar", file);
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/user/checkRegisterMsg",
                data: formData,
                processData: false,//阻止jquery对formData数据进行加工处理
                contentType: false,//阻止jquery修改formData数据的类型
                dataType:"json",
                success:function (result) {
                    var commonVo = result;
                    if (!commonVo.status){
                        $("#errorMessage").html(commonVo.message);
                    } else {
                        msgIsOk = true;
                    }
                }
            });
            if (msgIsOk && usernameIsOk) {
                $("form").submit();
            }
        }
    </script>
</head>
<body>
<form action="${pageContext.request.contextPath}/user/register" method="post" enctype="multipart/form-data">
    用户名：<input type="text" name="username" id="username"><br>
    密码：<input type="password" name="password"><br>
    头像：<input type="file" name="avatar"><br>
    <input type="button" value="注册">
</form>

<a href="${pageContext.request.contextPath}/view/login.jsp">去登录</a>

<div style="color: red" id="errorMessage"></div>
</body>