Enviar Bytes de um arquivo via Jquery/Ajax

Question

Olá a todos, 

Estou em uma tarefa que tenho que fazer Upload de um arquivo para o servidor.

Até agora tudo que fiz na aplicação foi via requisições Ajax usando Jquery(tentando usar uma arquitetura Restfull). Troco dados em json com o servidor, mas em uma determinada janela modal tenho que passar um arquivo atraves de um input file. Porem não sei como passar os bytes desse arquivo para o servidor via ajax.

Consegui no momento usando o Submit do formulario, mas devido ao que ja implementei, sou obrigado a direcionar para outra view (algo que não desejo), por isso escolhi usar uma janela modal. O código logo abaixo mostra como eu estava tentando implementar antes:

function SalvaAnotacaoOc() {

    try {

        var file = $("#arquivo")[0];
        
        var anotacao = { Subject: $("#titulo_anotaco").val(), NodeText: $("#descricao_anotacao").val(), ObjectId: $("#id_ocorrencia").val(), ObjectTypeCode: 112, FileName: file.files[0].name };

        if (!ValidouAnotacao(anotacao)) {
            return;
        }

        var str_anotacao = JSON.stringify(anotacao);
               
        $.ajax({

            url: url_base + "/api/Anotacao",
            data: str_anotacao,
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            async: true,
            success: function (data, ResponseText, jqXHR) {
                try {

                    if (jqXHR.readyState == 4) {

                        debugger;
                        if (jqXHR.status == 201) {
                           
                            alert('SALVOU  ANOTAÇÃO!');
                        }

                    }

                } catch (e) {                   
                    alert('ACONTECEU O SEGUINTE ERRO: ' + e.message);
                }

            },
            error: function (data, XMLHttpRequest, jqXHR) {

                console.log(data);
                alert("Erro: " + data.responseText + "\n" + jqXHR);
            }
        });

    } catch (e) {
        console.log(e.message);
        alert(e.message);
    }
}

Se eu consegui-se enviar o arquivo da forma acima, não precisaria mudar de view, pois em seguida avisaria o usuario que teve sucesso via a resposta do ajax. Os dois codigos abaixo demonstram a forma atual que estou fazendo. A qual nao me atende

 <form id="form_anotacao" class="form-horizontal" role="form" enctype="multipart/form-data" action="" method="post">

        <a href="#" class="fechar">X Fechar</a>
        <h4>Preencha os dados da Anotação</h4>
  

        <label for="titulo_anotaco">Título Anotação</label>
        <input type="text" id="titulo_anotaco" name="titulo_anotaco" value="" />
       

        <label for="descricao_anotacao">Descrição Anotação</label>
        <textarea id="descricao_anotacao" name="descricao_anotacao"></textarea>
        <br />
        <br />
        <fieldset>
            <legend>Escolha o Arquvio</legend>
            <input type="file" name="arquivo" id="arquivo" value="anexo" />
        </fieldset>
     

        <br />

        <button id="btn_salva_anotacao" type="submit">Salvar</button><br />

         <input id="id_ocorrencia_relacionada" type="hidden"  name="id_ocorrencia_relacionada"  value="" />
    </form>

public HttpResponseMessage Post(HttpRequestMessage request)
        {

            try
            {
                HttpRequest req = HttpContext.Current.Request;
               
                Entity anotacao_create = new Entity();

                anotacao_create.Attributes["filename"] = req.Files[0].FileName;

                anotacao_create.Attributes["documentbody"] = GetDadosArquivo(req);

                anotacao_create.Attributes["subject"] = req.Form["titulo_anotaco"].ToString().Trim();

                anotacao_create.Attributes["notetext"] =  req.Form["descricao_anotacao"].ToString().Trim();           
                           

                AnotacaoDao anotacao_dao = new AnotacaoDao();

                Guid id_nova_anotacao = anotacao_dao.CriaRegistro(anotacao_create);
                
                return Request.CreateResponse(System.Net.HttpStatusCode.Created);

            }
            catch (Exception e)
            {

                return Request.CreateResponse(System.Net.HttpStatusCode.BadRequest, "O PROBLEMA: " + e.Message);
            }
        }

        private string GetDadosArquivo(HttpRequest req)
        {

            HttpPostedFile arquivo1 = req.Files[0];

            long length = arquivo1.InputStream.Length;

            byte[] arrayByteFile = new byte[length];

            arquivo1.InputStream.Read(arrayByteFile, 0, (int)length);

            return Convert.ToBase64String(arrayByteFile);

            //var caminho = Path.Combine(HttpContext.Current.Server.MapPath("~/Content"), arquivo1.FileName);

            //arquivo1.SaveAs(caminho);

            //return arquivo1;

        }

O problema que quando pego os dados no servidor via o Submit do Formulario, não consigo mandar a resposta de vosta pro html como json e continuar na mesma tela. Por isso eu gostaria de postar o arquivo vai Ajax se possível.

A imagem abaixo mostra a tela em que estou tendo o problema.

---

Wagner dos Santos