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我得到输出。

在我的控制器中，我收到了这样的数据。

    [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!");
        }
    });
}

并且内部控制器只使用var files = Request.Form.Files;

获取文件

希望如果没有其他问题，它将解决您的问题。

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

1 个答案: