none
Enviar Bytes de um arquivo via Jquery/Ajax RRS feed

  • 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.

    Apos salvar o arquivo, essa tela desaparece quando uso o Submit do form.



    Wagner dos Santos

    quinta-feira, 10 de dezembro de 2015 16:58