Question

我有这个HTML：

<form class="form-control" target="upload-profile-picture" action="<external link>" method="post" enctype="multipart/form-data">
    <input type="file" name="file" data-bind="event: { change: function(vm, ev) { uploadImage(ev, $element.files[0]);} }" />
    <iframe id="upload-profile-picture" name="upload-profile-picture" class="hidden"></iframe>
    <button type="submit" id="submit" class="hidden"></button>
</form>

和脚本：

function uploadImage(ev) {
    $(ev.target).siblings('button:first').click();

    $(ev.target).siblings('iframe#upload-profile-picture').load(function() {
        console.log($(this).contents());
    });
}

我收到错误：

SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://localhost:65147" from accessing a cross-origin frame.

表单操作是将图像发布到另一个域托管的API，我想获取响应信息但是收到此错误。它无法通过ajax发布文件，因为API不支持。

如何获取响应数据？

更新：

当我使用ajax时：

$.ajax({
    type: "POST",
    url: "<external link>",
    data: {file: file},
    success: function (result) {
        console.log(result);
    },
    dataType: 'json',
    processData: false,
    contentType: 'multipart/form-data',
});

这是回复：

errorCode: 500
message: "the request was rejected because no multipart boundary was found"
reason: "API error"
stackTrace: null

如何在将表单数据发布到iframe后获取响应数据

0 个答案: