美文网首页
使用FormData,进行Ajax请求并上传文件

使用FormData,进行Ajax请求并上传文件

作者: dongshixiao | 来源:发表于2019-04-26 11:41 被阅读0次

    以前做的图片上传都是传到服务器或者阿里云oss等第三方的存储里;
    今天遇到一个对方写的接口,要使用form表单提交的方式提交到对方接口,还要注意multipart/form-data. ( imgFile 为 MultipartFile 类型)

    html部分:

    <img src="empty_head.png" id="userHeadimg" >
    <input id="Js_my_user_heading" type="file" style="display: none"/>
    <form enctype="multipart/form-data" method="post" name="Js_my_form"></form>
    

    js部分:

    $("#userHeadimg").click(function () {
        document.getElementById("Js_my_user_heading").click();
    });
    
    $("#Js_my_user_heading").on("change", function () {
        var formData = new FormData(document.forms.namedItem("Js_my_form"));
        formData.append("imgFile", $("#Js_my_user_heading")[0].files[0]);
        formData.append("jobNumber", userinfo.jobNumber);
        $.ajax({
            url: SERVER_URL + '/app/user/modifyUserInfo',
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (re) {
                // todo 回调逻辑
            }
        });
    });
    

    以上

    相关文章

      网友评论

          本文标题:使用FormData,进行Ajax请求并上传文件

          本文链接:https://www.haomeiwen.com/subject/bhdfnqtx.html