javascript - .NET Core 如何使用 AJAX 提交带有文件的表单？

Question

我有这个具有拖放功能的表单。使用this插件。

该代码创建了一个自动触发上传的拖放操作。

<div class="form-group g-mb-30">
    <label class="g-mb-10" for="inputGroup-3_1">Image *</label>
    <div class="g-pos-rel">
        <span class="g-pos-abs g-top-0 g-right-0 d-block g-width-40 h-100 opacity-0 g-opacity-1--success">
           <i class="hs-admin-check g-absolute-centered g-font-size-default g-color-lightblue-v3"></i>
        </span>
        <input class="js-file-attachment" name="fileAttachment2[]" type="file" id="ka-file">
    </div>
</div>

现在，在这个对象中，我设置了几个选项来处理我的表单。

        uploadFile: {
            url: '/FileUpload/Upload',
            data: document.getElementById('ka-file').files[0],
            type: 'POST',
            enctype: 'multipart/form-data',
            beforeSend: function() {
                formData = document.getElementById('ka-file').files[0];
                console.log(formData);
            },
        }

我通过 Id 获取元素并发送该数据。我知道我正在发送数据，因为在我的控制台上登录函数 beforeSend 我得到了输出。

在我的 Controller 中，我收到这样的数据。

    [HttpPost]
    public async Task<IActionResult> Upload(IFormFile file)
    {
        if(file == null)
        {
            return Ok(200);
        }
    }

但我的文件始终为null。我不确定我错过了什么。

Answer 1

我用它来上传文件，它还可以帮助您获取多个文件，只需在按钮单击事件上调用 SendImage() 即可。

function SendImage() {
    var fileUpload = $("#files").get(0);
    var files = fileUpload.files;
    var data = new FormData();
    for (var i = 0; i < files.length; i++) {
        data.append(files[i].name, files[i]);
    }
    $.ajax({
        type: "POST",
        url: "/FileUpload/Upload/",
        contentType: false,
        processData: false,
        data: data,
        success: function (data) {
            if (data.length > 0) {
                console.log(data)
            }
        },
        error: function () {
            alert("There was error uploading files!");
        }
    });
}

在 Controller 内部只需使用var files = Request.Form.Files;

获取文件

如果没有其他问题的话希望能解决您的问题。