jQuery 在提交时从 type="file" 输入框中读取字节 []

Question

我有一个自定义输入字段，我想在其中上传文件。

<form class="submitform">
    <div class="input-group">
            <input type="file" class="custom-file-input" id="fileInput"
                   aria-describedby="fileInput" />
            <label class="custom-file-label" for="fileInput">Choose file</label>
    </div>
    <div class="modal-footer row">
        <button type="submit" class="btn btn-primary" id="submitAddFile">Submit</button>
        </div>
    </div>
</form>

一旦按下表单中的提交按钮，我想分别获取文件名和字节[]。 我尝试通过 jQuery 以下列方式进行：

$('#submitAddFile').click(function () {
    var file = $('#fileInput')[0].files;
    debugger;
}

然后我没有进一步了解.. 从我可以通过调试读取的内容来看，我没有得到任何可以拉出并发送到我的控制器的字节 []。然而，我能够得到一些东西，比如文件大小和文件名。

因此，我如何正确提取 byte[] 以便将其存储在我的数据库中

Answer 1

您可以使用表单提交或使用ajax发布表单并使用IFormFile操作来接收您的文件。在操作中，您可以获取文件名或将文件转换为byte[]。

动作参数的名称必须与表单数据的名称相匹配。

例如：

Js：

<script>
    $('#submitAddFile').click(function (e) {
        e.preventDefault();
        var file = $('#fileInput')[0].files;
        var formData = new FormData();
        formData.append("myFile", file[0]);


        $.ajax({
            type: "POST",
            url: "/Home/UploadFile",
            contentType: false,
            processData: false,
            data: formData,
            success: function (result) {
                alert("success");
            },
            error: function () {
                alert("there was an error");
            }
        });
    })
</script>

家庭控制器：

[HttpPost]
public void UploadFile(IFormFile myFile)
    {
        var fileName = Path.GetFileName(myFile.FileName);
        using (var ms = new MemoryStream())
        {
            myFile.CopyTo(ms);
            byte[] fileBytes = ms.ToArray();

            //save fileName and fileBytes into database
        }       

    }