2

Estou com o seguinte problema quando utilizo o upload de arquivo. O ajax executa "ao mesmo tempo" as duas actions. E gostaria que ele executasse a action de ulpoad e depois a outra. Ou então uma outra maneira de fazer o upload.

<div class="editor-field">
   <input type="file" name="file" id="file" />
   @Html.HiddenFor(model=>model.FotoVitrine)
   @Html.ValidationMessageFor(model => model.FotoVitrine)
</div>
<button type="button" onclick="postUpload('/CMS/Produto/Create', '/CMS/Produto/Index');" class="btn btn-success">Salvar</button>


function postUpload(post, redirect) {
    uploadfile();
    OpenPost(post, redirect);
}



function uploadfile() {
    var img = $("#file").val();
    if (img) {
        var file = document.getElementById('file').files[0];
        var formData = new FormData();
        formData.append(file.name, file);
        var xhr = new XMLHttpRequest();
        var url = "/Produto/UploadArquivo";
        xhr.open('POST', url, true);
        xhr.onload = function (e) {
            var response = $.parseJSON(e.target.response);
            console.log(response.fileName);
            alert(response.fileName);
            $("#FotoVitrine").val(response.fileName);
        };
        xhr.send(formData);
    }
}

    function OpenPost(url, redirect) {
        if ($("form").valid()) {
            var form = $("form").serialize();
            $('#Conteudo').empty().append('<div id="loader"><img src="/Content/Images/loading.gif"/></div>');
            $.ajax({
                type: "POST",
                url: url,
                data: form,
                success: function (response) {
                    Open(redirect);
                }
            });
        }
    }


    function Open(url, redirect) {
        $('#Conteudo').empty().append('<div id="loader"><img src="/Content/Images/loading.gif"/></div>');
        $.get(url, function (response) {
            if (redirect)
                Open(redirect);
            $('#Conteudo').html(response);
            $('#loader').remove();
        });
    }







    [AcceptVerbs(HttpVerbs.Post)]
    public void UploadArquivo()
    {
        HttpPostedFileBase file = Request.Files[0] as HttpPostedFileBase;

        if (file != null && file.ContentLength > 0)
        {
            FtpWebRequest request = (FtpWebRequest)WebRequest.Create("server" + file.FileName);
            request.Method = WebRequestMethods.Ftp.UploadFile;
            request.Credentials = new NetworkCredential("user", "pass");
            request.UsePassive = false;
            byte[] fileContents = new byte[file.ContentLength];
            file.InputStream.Position = 0;
            file.InputStream.Read(fileContents, 0, file.ContentLength);
            request.ContentLength = fileContents.Length;
            Stream requestStream = request.GetRequestStream();
            requestStream.Write(fileContents, 0, fileContents.Length);
            requestStream.Close();
            FtpWebResponse response = (FtpWebResponse)request.GetResponse();
            response.Close();
        }
    }


[AcceptVerbs(HttpVerbs.Post), ValidateInput(false)]
    public PartialViewResult Create(FormCollection collection)
    {
        var bdprodutos = Loja_ProdutosAplicacaoConstrutor.Loja_ProdutosAplicacaoEF();
        var produto = new Loja_Produtos();
        produto.FotoVitrine = collection["FotoVitrine"];
        (...)
        return null;
    }

1 Resposta 1

2

Teste assim:

Aonde onreadystatechange == 4: significa: pedido terminou e a resposta está pronta e xhr.status == 200, processo está "OK".

function postUpload(post, redirect) {
    uploadfile(post, redirect);    
}

function uploadfile(post, redirect) {
    var img = $("#file").val();
    if (img) {
        var file = document.getElementById('file').files[0];
        var formData = new FormData();
        formData.append(file.name, file);
        var xhr = new XMLHttpRequest();
        var url = "/Produto/UploadArquivo";
        xhr.open('POST', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status==200) {
                OpenPost(post, redirect);
            }
        }
        xhr.onload = function (e) {
            var response = $.parseJSON(e.target.response);
            console.log(response.fileName);
            alert(response.fileName);
            $("#FotoVitrine").val(response.fileName);
        };
        xhr.send(formData);
    }
}

Com retorno de alguma informação:

Controler Index:

[HttpPost]        
public JsonResult Index(FormCollection form)
{
    HttpPostedFileBase file = Request.Files[0];
    return Json(new {Nome = "Nome do Arquivo"}, JsonRequestBehavior.AllowGet);
}

Ajax Javascript: Trecho corresponde ao primeiro exemplo

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {         
        var dados = JSON.parse(xhr.responseText);
        alert(dados.Nome);
        OpenPost(post, redirect);
    }
}

Referência:

4
  • 1
    resolveu meu problema. Está dando um erro agora mas não é relacionado ao ajax, vou colocar o erro aqui, se precisar abro outra pergunta: An exception of type 'System.Net.WebException' occurred in System.dll but was not handled in user code Additional information: The remote server returned an error: (425) Can't open data connection. Commented 16/06/2014 às 18:45
  • Melhor abrir outra questão! se o erro não for no ajax
    – user6026
    Commented 16/06/2014 às 18:51
  • Se minha action de upload retornar um valor (por exemplo o nome do arquivo renomeado), como faço para o ajax receber? Commented 16/06/2014 às 19:49
  • @DiegoZanardo fiz a edição e coloquei o exemplo ...
    – user6026
    Commented 17/06/2014 às 0:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .