使用 JQuery AJAX 发送包含文件和附加 json 表单数据的 multipart/form-data

Posted 2023-02-19

【中文标题】使用 JQuery AJAX 发送包含文件和附加 json 表单数据的 multipart/form-data

【英文标题】：Send multipart/form-data including a file and additional json form-data with JQuery AJAX

【发布时间】：2017-01-29 07:49:12

【问题描述】：

我有一个 HTTP API，它等待具有这种结构的 multipar/form-data 消息：

--boundary
Content-Disposition: form-data; name=""Meta""
Content-Type: application/json

""Title"":""title"",""Description"":""description"",""Number"":3
--boundary
Content-Disposition: form-data; name=""file""; filename=""fileName""
Content-Type: text/plain
Content-Transfer-Encoding: 7BIT

some text content
--boundary

我正在尝试将消息的结构设置为 FormData，如下所示：

var data = new FormData();
 data.append("Meta", "Content-Type: application/json\r\n\r\n" + [JSON.stringify( Title: "title", Description: "description", Number: 3)] + "\r\n");
data.append('File', document.getElementById("file").files[0]);

$.ajax(
    url: myservice,
    data: data,
    cache: false,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function (data, status, req) 
        alert("OK"+req);
    ,
    error: function (req, status, error) 
        alert("ERROR"+req);
    
);

但是我无法将内容类型添加到非文件部分。

通过这种方法，我在 Content-Disposition 和 Content-Type 之间用剩余的断线制作了一条消息。

-----------------------------10743159127866
Content-Disposition: form-data; name="Meta"

Content-Type: application/json

"Title":"title","Description":"description","Number":3

-----------------------------10743159127866
Content-Disposition: form-data; name="File"; filename="b839f0cc60ac4fb68f826b20cd02873b.pdf"
...

【问题讨论】：

您检查过引号 (") 吗？引号可能会破坏您的代码

【参考方案1】：

<script type="text/javascript">
$(document).ready(function() 
    $("#submit").click(function() 
        var fileInput = document.getElementById('image');
        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append('file', file);
        $.ajax(
            url: "url.php",
            type: "POST",
            data: "file="+file,
            cache: false,

            success: function(res) 
                alert(res);
            ,
            error: function(err)
                alert(err);
            
        );
    ); 
);
</script>