美文网首页
使用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