Inquiridor
Enviar Bytes de um arquivo via Jquery/Ajax

Pergunta
-
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