将表单发布到 api 端点，并在 javascript 回调中获取响应

Question

这是我当前将文件上传到我的网络应用程序的设置：

.HTML：

<iframe name="myframe" id="frame1" class="hidden"></iframe>
<form target="myframe" method="post" enctype="multipart/form-data" action="/api/User/collection">
    <input type="file" name="file" />
    <input type="submit" value="Upload" />
</form>

控制器：

// POST api/user/collection
[HttpPost("collection")]
public ActionResult<IResponse> SetCollection(IFormFile file)
{
    var collection = fileDeflator.UnzipAndGetCollection(file);
    if (collection == null)
        return BadRequest(new BaseResponse("The collection file is invalid."));
    return base.SetUserCollection(collection);
}

它正在工作，除了客户根本没有反馈。

我希望服务器返回的 JSON 被捕获在网页（而不是 iframe）上的 javascript 回调中，并被解析以刷新页面上的部分。

以

form提交的性质，这可能吗？

Answer 1

最后，我用艾米提供的有用资源按照我想要的方式工作。

这是解决方案：

<form id="formSendCollection">
    <input type="file" id="fileCollection" name="fileCollection" />
    <span onclick="submitCollection();" class="button is-primary">Submit</span>
</form>
function submitCollection() {
    var fdata = new FormData();
    var fileCollection = document.getElementById('fileCollection').files[0];
    fdata.append("fileCollection", fileCollection);
    sendAjax('/api/User/Collection', fdata, function (body) {
        vueApp.modelUser.collection = JSON.parse(body);
    });
}
function sendAjax(url, body, callback) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === XMLHttpRequest.DONE) {
            callback(xmlhttp.responseText);
        }
    };
    xmlhttp.open('POST', url, true);
    xmlhttp.send(body);
}