Send file used @ Ajax.BeginForm and XMLHttprequest

I have the following question:

I'm doing a post with @Ajax.BeginForm , however it does not send a file, so I wanted to use File Api , my idea was as follows

I would do post by @Ajax.BeginForm thus:

     @using (Ajax.BeginForm("Cadastrar", "Item", new AjaxOptions { HttpMethod = "Post",OnSuccess = "onSuccess"}, new { Id = "formItem" }))
{
  <div class="box-body" id="boxNovoProduto">
                    @Html.AntiForgeryToken()
                    @Html.HiddenFor(model => model.Tipo)
                    <div class="form-group">
                        @Html.LabelFor(model => model.Titulo)
                        @Html.TextBoxFor(model => model.Titulo, new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.Titulo, "", new { @class = "text-danger", required = "required" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.LinkVenda)
                        @Html.TextBoxFor(model => model.LinkVenda, new { @class = "form-control" })
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(model => model.Descricao)
                        @Html.TextBoxFor(model => model.Descricao, new { @class = "form-control textarea textarea-fixed", })
                        @Html.ValidationMessageFor(model => model.Descricao, "", new { @class = "text-danger", required = "required" })
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <legend><i class="fa fa-image"></i> Selecione imagens</legend>
                            <input id="inputImagens" accept="image/*" name="input44[]" type="file" multiple class="file-loading">
                            <div id="blocoErroImagem" class="help-block"></div>
                        </div>
                    </div><br />

                    @if (Model.VideoAtivo)
                    {
                        <div class="row">
                            <div class="col-xs-12">
                                <legend><i class="fa fa-file-video-o"></i> Adicione um vídeo</legend>
                                <input id="inputVideos" accept="video/*" name="input44[]" type="file" multiple class="file-loading">
                                <div id="blocoErroVideo" class="help-block"></div>
                            </div>
                        </div><br />
                    }
                </div>
                <div class="box-footer" style="margin-top: 10PX;text-align: center">
                    <button type="submit" id="btnSubmit" class="btn btn-primary btn-lg  pull-right">Publicar</button>
                </div>
            }
}

And then, on the submit I would send the file to the same method, something like this:

 document.getElementById('formItem').onsubmit = function (e) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/Unidade/Item/Cadastrar');
        xhr.send(formdata);
        return false;
    }

In the controller I get the following: public ActionResult Register (ProductCreateModel productCreateModel)

And my intention is to receive the file as follows:

Request.Files[i]

But when I give xhr.send(formdata); I get error 500 , and Request.Files is always empty, I do not know if I could do this, and if that is not possible, I accept suggestions.

If you can explain a little about the operation would be eternally grateful.

I tried to send to another controller, in onsuccess I called a function called sendFile , until it works but I did not think it was really cool, if anyone has any idea how to do it.